<!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"),
imgCount=ct.children().length;
var iNow=0;
var timer=null;
function firstImg(){
items.eq(0).fadeIn(500).siblings().fadeOut(500);
}
firstImg();
bullet.find("li").on("click",function(){
var idx=$(this).index();
iNow=idx;
$(this).addClass("active").siblings().removeClass("active");
items.eq(iNow).fadeIn(500).siblings().fadeOut(500);
});
timer=setInterval(function(){
iNow++;
if(iNow>=imgCount){
iNow=0;
}
bullet.children().eq(iNow).trigger("click");
},2000);
pre.on("click",function(){
});
next.on("click",function(){
});
</script>
</body>
</html>请帮我把这个轮播图的左右箭头功能帮我添加出来,我实在想不出来!谢谢各位
添加回答
举报
0/150
提交
取消