<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渐变式轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
#carousel{
width: 310px;
height: 206px;
overflow: hidden;
position: relative;
}
#carousel .img-ct{
position: relative;
}
#carousel .img-ct li{
position: absolute;
display: none;
}
#carousel .img-ct img{
width: 310px;
height: 206px;
}
#carousel .arrow{
position: absolute;
top: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
line-height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
border-radius: 30px;
box-shadow: 0 0 2px #999;
opacity: 0.8;
}
#carousel .arrow:hover{
opacity: 1;
}
#carousel .pre{
left: 10px;
}
#carousel .next{
right: 10px;
}
#carousel .bullet{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
#carousel .bullet li{
width: 16px;
height: 4px;
background: #fff;
display: inline-block;
border-radius: 2px;
cursor: pointer;
}
#carousel .bullet .active{
background: #666;
}
</style>
</head>
<body>
<div id="carousel">
<ul class="img-ct">
<li><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/26.jpg" alt=""></a></li>
<li><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/25.jpg" alt=""></a></li>
<li><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/24.jpg" alt=""></a></li>
<li><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/23.jpg" alt=""></a></li>
</ul>
<a class="pre arrow" href="#"><</a>
<a class="next arrow" href="#">></a>
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var ct=$(".img-ct"),
items=ct.children(),
pre=$(".pre"),
next=$(".next"),
bullet=$(".bullet"),
imgWidth=items.width(),
imgCount=ct.children().length;
var curIdx=0;
var isAnimate=false;
next.on("click",function(){
playNext();
});
pre.on("click",function(){
playPre();
});
bullet.find("li").on("click",function(){
var idx=$(this).index();
play(idx);
});
function playNext(){
play((curIdx+1)%imgCount)
}
function playPre(){
play((imgCount+curIdx-1)%imgCount)
}
function play(idx){
if(isAnimate) return;
isAnimate=true;
items.eq(curIdx).fadeOut(500);
items.eq(idx).fadeIn(500,function(){
isAnimate=false;
});
curIdx=idx;
setBullet();
}
play(0);
function setBullet(){
bullet.children().removeClass("active").eq(curIdx).addClass("active");
}
function autoPlay(){
setInterval(function(){
playNext();
},2000)
}
autoPlay();
</script>
</body>
</html>同学请看以下,这个是轮播代码,但是我对函数play()里面的idx和curIdx之间的关系搞晕了.可有同学帮我理理这之间的逻辑关系?万分感谢
2 回答
慕粉4334222
TA贡献3条经验 获得超1个赞
curldx //指轮播图现在显示的图片,在集合对象中所在位置索引
idx //指即将轮播的下张图片,在集合对象中所在位置索引(由playNext和playPre计算所得)
//body加载之后,调用playNext()计算即将显示的图片索引
play(idx);
items.eq(curIdx).fadeOut(500);// 现在的图片隐藏
items.eq(idx).fadeIn(500,function(){
isAnimate=false;
}); // 下张图片显示,
curIdx=idx; 显示图片索引 赋值给 全局变量cruIdx;
添加回答
举报
0/150
提交
取消