61,112
社区成员
发帖
与我相关
我的任务
分享JS求代码
解释下我的问题：
我想做个JS特效
什么特效呢？
一个背景色在几个DIV上不停的轮换
实例：
灰色背景，显示在一个DIV上呈灰色；2秒在下一个DIV上呈灰色；在过2秒，在下一个DIV上呈灰色；
我想做个JS特效
什么特效呢？
一个背景色在几个DIV上不停的轮换
实例：
灰色背景，显示在一个DIV上呈灰色；2秒在下一个DIV上呈灰色；在过2秒，在下一个DIV上呈灰色；
...全文
请发表友善的回复…
发表回复
forwardNow 2015-05-08
- 打赏
- 举报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.normal {
width: 100px;
height: 100px;
border: solid 1px gray;
margin: 10px;
}
.current {
background-color: gray;
}
</style>
<div id="container">
<div class="normal">1</div>
<div class="normal">2</div>
<div class="normal">3</div>
<div class="normal">4</div>
</div>
<script>
setInterval( play, 1000 * 2 );
// 获取所有的div
play.divs = document.getElementById( "container" ).getElementsByTagName( "div" );
// 计时器
play.count = 0;
function play() {
var divs = play.divs;
for (var i = 0; i < divs.length; i++) {
if ( i === play.count % divs.length ) {
divs[ i ].className = "normal current";
continue;
}
divs[ i ].className = "normal";
}
play.count++;
}
</script>
</body>
</html>
longbubblie 2015-05-07
- 打赏
- 举报
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<style>
#main div{ width:100px; height:100px; background-color:red; margin:10px;}
</style>
</head>
<body>
<div id="main">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
<script>
$(function(){
var divs = $("#main div");
var current = 0;
setInterval(function(){
$(divs).each(function(){
$(this).css("background-color","red");
});
$(divs).each(function(e){
if(e==current){
$(divs[e]).css("background-color","black");
current++;
if(current>=divs.length){current=0;}
return false;
}
});
},2000);
});
</script>
</html>
娃都会打酱油了 2015-05-07
- 打赏
- 举报
忽略上面的，你这个是要setInterval
var idx=0;
setInterval(function(){
var divs = $('div');
divs .removeClass("classShow");
$('div:eq('+idx+')').addClass("classShow");
idx++;
idx=idx%divs.length;
},2000);娃都会打酱油了 2015-05-07
- 打赏
- 举报
$('div:odd').addClass("class1");
$('div:even').addClass("class2");