<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图片</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
// 当前显示图片的下标,第一张
var index = 0;
$(function(){
// 当前显示的图片淡出,之后当前显示的图片的下一张淡入
// 3秒后执行定时轮播
setInterval(function(){
// 淡出
$(".lun>li:eq("+index+")").fadeOut(500,'linear',function(){
// 如果轮播到了或者超过最后一张,回到第一张
if(index >= $(".lun>li").length-1){
index=0;
} else{// 否则,轮播下一张
index++;
}
// 淡入
$(".lun>li:eq("+index+")").fadeIn(500,'linear');
});
}, 3000);
});
</script>
<style type="text/css">
.hidden{
display: none;
}
ul li img{
width: 800px;
height: 600px;
}
*{
margin: 0px;
padding: 0px;
}
ul li{
list-style: none;
}
</style>
</head>
<body>
<ul class="lun">
<li><img src="../images/1.jpg"/></li>
<li class="hidden"><img src="../images/2.jpg"/></li>
<li class="hidden"><img src="../images/3.jpg"/></li>
</ul>
</body>
</html>
jQuery实现轮播图片
于 2018-07-26 14:36:18 首次发布