jquery轮播图最后一张图与第一张图间距很大，怎么办？求帮助！代码如下： 5
<styletype="text/css">#banner{width:1898px;height:545px;margin:20px0;overflow:hidden;...
<style type="text/css">
#banner{ width:1898px; height:545px; margin:20px 0; overflow:hidden;}
#banner .left{ width:340px; height:545px; background:rgba(0,0,0,0.5); float:left; position:relative; z-index:2;}
#banner .content{width:1218px; height:545px; float:left;position:relative;}
#banner .right{ width:340px; height:545px; background:rgba(0,0,0,0.5);float:left; position:relative; z-index:2;}
#banner .content .le{ display:block; margin:235px 40px; float:left; position:relative; cursor:pointer;}
#banner .content .ri{ display:block; margin:235px 1120px; position:relative;cursor:pointer; }
#banner .content ul{ width:700%; height:545px; position:absolute; left:-1218px; top:0;}
#banner .content ul li{ width:1218px; height:545px; float:left; list-style:none;}
</style>
<body>
<div id="banner">
<div class="left"></div>
<div class="content"><ul>
<li><img src="images1/a1.jpg" width="1218" height="545"/></li>
<li><img src="images1/a2.jpg" width="1218" height="545"/></li>
<li><img src="images1/a3.jpg" width="1218"/></li>
<li><img src="images1/a4.jpg" width="1218" height="545"/></li>
<li><img src="images1/a5.jpg" width="1218" /></li>
<li><img src="images1/a6.jpg" width="1218" /></li>
</ul>
<div class="le"><img src="images1/left.png" /></div><div class="ri"><img src="images1/right.png" /></div>
</div>
<div class="right"></div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var num=1;
var time;
$("#banner .content .ri img").click(function(){
num++;
if(num>6){
num=0;
$("#banner .content ul").css({left:0+"px"});
}
$("#banner .content ul").animate({left:-(num*1218)+"px"},500);
});
$("#banner .content .le img").click(function(){
num--;
if(num<0){
num=6;
$("#banner .content ul").css({left:-(1218*6)+"px"});
}
$("#banner .content ul").animate({left:-(num*1218)+"px"},500);
});
</script>
</body> 展开
#banner{ width:1898px; height:545px; margin:20px 0; overflow:hidden;}
#banner .left{ width:340px; height:545px; background:rgba(0,0,0,0.5); float:left; position:relative; z-index:2;}
#banner .content{width:1218px; height:545px; float:left;position:relative;}
#banner .right{ width:340px; height:545px; background:rgba(0,0,0,0.5);float:left; position:relative; z-index:2;}
#banner .content .le{ display:block; margin:235px 40px; float:left; position:relative; cursor:pointer;}
#banner .content .ri{ display:block; margin:235px 1120px; position:relative;cursor:pointer; }
#banner .content ul{ width:700%; height:545px; position:absolute; left:-1218px; top:0;}
#banner .content ul li{ width:1218px; height:545px; float:left; list-style:none;}
</style>
<body>
<div id="banner">
<div class="left"></div>
<div class="content"><ul>
<li><img src="images1/a1.jpg" width="1218" height="545"/></li>
<li><img src="images1/a2.jpg" width="1218" height="545"/></li>
<li><img src="images1/a3.jpg" width="1218"/></li>
<li><img src="images1/a4.jpg" width="1218" height="545"/></li>
<li><img src="images1/a5.jpg" width="1218" /></li>
<li><img src="images1/a6.jpg" width="1218" /></li>
</ul>
<div class="le"><img src="images1/left.png" /></div><div class="ri"><img src="images1/right.png" /></div>
</div>
<div class="right"></div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var num=1;
var time;
$("#banner .content .ri img").click(function(){
num++;
if(num>6){
num=0;
$("#banner .content ul").css({left:0+"px"});
}
$("#banner .content ul").animate({left:-(num*1218)+"px"},500);
});
$("#banner .content .le img").click(function(){
num--;
if(num<0){
num=6;
$("#banner .content ul").css({left:-(1218*6)+"px"});
}
$("#banner .content ul").animate({left:-(num*1218)+"px"},500);
});
</script>
</body> 展开
2个回答
展开全部
//只修改了你的js，循环播放
<script type="text/javascript">
var num=1;
var time;
$("#banner .content .ri img").click(function(){
$("#banner .content ul").stop(true, false).animate({left:-2436+"px"},500,function(){
var lidiv = $('.content ul li:first');
$('.content ul').append(lidiv);
$("#banner .content ul").css({left:-1218+"px"});
});
})
$("#banner .content .le img").click(function(){
var lidiv = $('.content ul li:last');
$('.content ul').prepend(lidiv);
$("#banner .content ul").css({left:-2436+"px"});
$("#banner .content ul").stop(true, false).animate({left:-1218+"px"},500,function(){
});
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
