<!DOCTYPE html>
<html>
<head>
<title>测试jquery动画队列</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{padding: 0;margin:0;}
ol ul li{
list-style: none;
}
li{
position: relative;
margin-top: 10px;
margin-left: 0px;
width: 300px;
height: 40px;
background: green;
}
ol{
width:300px;
height: 600px;
background: ;
position: absolute;
}
.div1{
position: absolute;
/*float: flex;*/
width: 0px;
height: 0px;
/*background: red;*/
opacity: 1;
border:2px dashed black;
z-index: 2;
}
</style>
</head>
<body>
<ol>
<li class="li1" style="background: red"></li>
<li class="li2" style="background:yellow "></li>
<li class="li3" style="background: "></li>
<li class="li4" style="background: "></li>
</ol>
</body>
<script type="text/javascript">
$(document).ready(function(){
//$(".li").css('opacity','0');
$(".li2").css('opacity','0');
$(".li3").css('opacity','0');
$(".li4").css('opacity','0');
//$(".li1").css('visibility','hidden');
$(".li2").css('visibility','hidden');
$(".li3").css('visibility','hidden');
$(".li4").css('visibility','hidden');
setInterval(function(){h()},36000);
var h=function(){
$(".li1").animate({
opacity:'1',
},4000,);
$(".li1").animate({//$(".li2").css('opacity','0');
opacity:'0',
},4000,function(){$(".li2").css('visibility','visible');$(".li1").css('visibility','hidden');});
$(".li2").animate({
opacity:'0',
},8000,);
$(".li2").animate({
opacity:'1',
},4000,);
$(".li2").animate({
opacity:'1',
},4000,);
$(".li2").animate({
opacity:'0',
},4000,function(){$(".li2").css('visibility','hidden');$(".li3").css('visibility','visible');});
$(".li3").animate({
opacity:'0',
},16000,);
$(".li3").animate({
opacity:'1',
},4000,);
$(".li3").animate({
opacity:'1',
},4000,);
$(".li3").animate({
opacity:'0',
},4000,function(){$(".li3").css('visibility','hidden');$(".li4").css('visibility','visible');});
$(".li4").animate({
opacity:'0',
},24000,);
$(".li4").animate({
opacity:'1',
},4000,);
$(".li4").animate({
opacity:'1',
},4000,);
$(".li4").animate({
opacity:'0',
},4000,function(){$(".li4").css('visibility','hidden');$(".li1").css('visibility','visible');$(".li1").css('opacity','0');});
}
h();
});
</script>
<script type="text/javascript">
//1:结构上用ul套li---li里面套img。img上面加链接
//2：底部的切换 用的小圆点也用ul，两个ul套在一个div里面；
//3:到底是用淡入淡出还是左右一次滑动轮播
//4：jquery动画怎么弄的，-animate({动作}+时间)/也要用驼峰命名
//5：一次性动画可以弄出来，连续重复动画怎么弄？
// 计时器的方法不行，
// 一个函数调用本身，
// 在动画内部调用函数，并且自己调用自己的方式可行
// 问题：寻找子元素的问题：要带引号
// 循环重复动画，自测试失败
// setInterval(function(){h()},3000); 使用自循环测试成功，里面必须是函数
// 前面两个已经执行淡入淡出连续成功了，第三个失败了
// jquery本身有淡入淡出的命令；
// 队列在同一个元素可以依次执行，多个的话就会同时进行
</script>
<html>
<head>
<title>测试jquery动画队列</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{padding: 0;margin:0;}
ol ul li{
list-style: none;
}
li{
position: relative;
margin-top: 10px;
margin-left: 0px;
width: 300px;
height: 40px;
background: green;
}
ol{
width:300px;
height: 600px;
background: ;
position: absolute;
}
.div1{
position: absolute;
/*float: flex;*/
width: 0px;
height: 0px;
/*background: red;*/
opacity: 1;
border:2px dashed black;
z-index: 2;
}
</style>
</head>
<body>
<ol>
<li class="li1" style="background: red"></li>
<li class="li2" style="background:yellow "></li>
<li class="li3" style="background: "></li>
<li class="li4" style="background: "></li>
</ol>
</body>
<script type="text/javascript">
$(document).ready(function(){
//$(".li").css('opacity','0');
$(".li2").css('opacity','0');
$(".li3").css('opacity','0');
$(".li4").css('opacity','0');
//$(".li1").css('visibility','hidden');
$(".li2").css('visibility','hidden');
$(".li3").css('visibility','hidden');
$(".li4").css('visibility','hidden');
setInterval(function(){h()},36000);
var h=function(){
$(".li1").animate({
opacity:'1',
},4000,);
$(".li1").animate({//$(".li2").css('opacity','0');
opacity:'0',
},4000,function(){$(".li2").css('visibility','visible');$(".li1").css('visibility','hidden');});
$(".li2").animate({
opacity:'0',
},8000,);
$(".li2").animate({
opacity:'1',
},4000,);
$(".li2").animate({
opacity:'1',
},4000,);
$(".li2").animate({
opacity:'0',
},4000,function(){$(".li2").css('visibility','hidden');$(".li3").css('visibility','visible');});
$(".li3").animate({
opacity:'0',
},16000,);
$(".li3").animate({
opacity:'1',
},4000,);
$(".li3").animate({
opacity:'1',
},4000,);
$(".li3").animate({
opacity:'0',
},4000,function(){$(".li3").css('visibility','hidden');$(".li4").css('visibility','visible');});
$(".li4").animate({
opacity:'0',
},24000,);
$(".li4").animate({
opacity:'1',
},4000,);
$(".li4").animate({
opacity:'1',
},4000,);
$(".li4").animate({
opacity:'0',
},4000,function(){$(".li4").css('visibility','hidden');$(".li1").css('visibility','visible');$(".li1").css('opacity','0');});
}
h();
});
</script>
<script type="text/javascript">
//1:结构上用ul套li---li里面套img。img上面加链接
//2：底部的切换 用的小圆点也用ul，两个ul套在一个div里面；
//3:到底是用淡入淡出还是左右一次滑动轮播
//4：jquery动画怎么弄的，-animate({动作}+时间)/也要用驼峰命名
//5：一次性动画可以弄出来，连续重复动画怎么弄？
// 计时器的方法不行，
// 一个函数调用本身，
// 在动画内部调用函数，并且自己调用自己的方式可行
// 问题：寻找子元素的问题：要带引号
// 循环重复动画，自测试失败
// setInterval(function(){h()},3000); 使用自循环测试成功，里面必须是函数
// 前面两个已经执行淡入淡出连续成功了，第三个失败了
// jquery本身有淡入淡出的命令；
// 队列在同一个元素可以依次执行，多个的话就会同时进行
</script>
</html>
还有一点小问题，li4循环到li1的时候延迟了4秒，