轮播图下面点击的li（圆），点击后的顺序，求大神解答该怎么做。
轮播图下面点击的圆，比如当前是轮播到第二个圆（第几个圆代表第几个图），当我点击第一个圆的时候，图片切换到了第一张图，但是下一个执行的应该是第二张图，可是它执行的却是第三个。因为鼠标点击后的那个没记录下来吗？该怎么弄？
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<style type="text/css">
#scroll{
position:relative;
width: 1000px;
margin: 0 auto;
height: 300px;
overflow:hidden;
}
#scroll_top{
width: 1000px;
height: 300px;
}
#scroll_bottom{
width: 1000px;
height: 74px;
line-height: 74px;
position: absolute;
bottom:-1px;
background:url(../img/image-mask.png) no-repeat;
}
#scroll_bottom ul{
position: absolute;
right: 71px;
bottom:20px;
list-style: none;
}
#scroll_bottom li{
width:8px;
height:8px;
float: left;
margin-right:14px;
background: #BFBFBF;
border:1px solid #BFBFBF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="scroll">
<div id="scroll_top">
<a href="#" target="_blank"> <img src="img/01.jpg" title="" alt="" /></a>
<a href="#" target="_blank"> <img src="img/02.jpg" title="" alt="" /></a>
<a href="#" target="_blank"> <img src="img/03.jpg" title="" alt="" /></a>
</div>
<div id="scroll_bottom">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
var n =0;
$(document).ready(function(e) {
$("#scroll_bottom li").click(function(e) {
var i = $(this).index();
$("#scroll_top a").filter(":visible").fadeOut(300);
$("#scroll_top a").eq(i).fadeIn(500);
$(this).css({background:'#00A0E9'}).siblings().css({background:'#BFBFBF'})
});
$("#scroll_bottom li").eq(0).trigger("click")
var t=setInterval("dsq()",3000);
$("#scroll_bottom").hover(function(){
clearInterval(t) //鼠标悬停的时候，停止轮播
},
function(){
t=setInterval("dsq()",3000)
});
});
function dsq(){
if(n >= $("#scroll_top img").length-1) n = 0;
else n++;
$("#scroll_bottom li").eq(n).trigger("click")
}
</script>
</body>
</html>
qq_控心_02回答
随时随地看视频慕课网APP
相关分类
JavaScript
JQuery