Jquery图片轮播循环问题，求大神指教，怎么实现循环播放？
<!DOCTYPEhtml><html><head><metacharset="utf-8"><styletype="text/css">#picShowimg{widt...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#picShow img{width: 468px;height: 228px;margin: 0;padding: 0;}
#picShow{position: relative;top: 0px;border: none;}
#picTitle{position: relative;z-index: 11px;width: 468px;height: 30px;background: rgba(0,0,0,0.7);top: -955px;color: #999;text-indent: 10px;line-height: 30px; font-family: "Microsoft YaHei"}
#communityActivities{left: 478px;top: 9px;position: absolute;width: 468px;height: 228px;overflow: hidden;}
</style>
<script type="text/javascript" src='jquery-1.8.3.js'></script>
</head>
<body>
<section id="communityActivities">
<div id="picShow">
<img src="images/pic.jpg">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
<img src="images/pic3.jpg">
<img src="images/pic4.jpg">
</div>
<div id="picTitle">这是新闻标题啊</div>
</section>
<script type="text/javascript">
function picTurn(elementId){
var $top = parseInt($(elementId).css('top'));
if ($top<-924) {
$top=231;
var $pic=$(elementId).find('img:first').remove();
$(elementId).find('img:last').append($pic);
};
$top -=231;
$top +='px';
$(elementId).animate({top:$top},"slow");
}
$(document).ready(function() {
setInterval("picTurn('#picShow')", 2000);
});
</script>
</body>
</html>
代码在这里了，下个jquery和几张图片就可以用，求大神帮我测一下，主要是想当循环播放到最后一张时又从第一张开始播放，过度和其他一样，就是类似第二张到第三张那样自然，而不是突然间刷的从第五张到第一张，一直测不好，求大神测好后告诉我，参考效果类似登陆后百度首页的新闻轮播，注意循环，最后一张到第一张的动画转换也是和其他一样的 展开
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#picShow img{width: 468px;height: 228px;margin: 0;padding: 0;}
#picShow{position: relative;top: 0px;border: none;}
#picTitle{position: relative;z-index: 11px;width: 468px;height: 30px;background: rgba(0,0,0,0.7);top: -955px;color: #999;text-indent: 10px;line-height: 30px; font-family: "Microsoft YaHei"}
#communityActivities{left: 478px;top: 9px;position: absolute;width: 468px;height: 228px;overflow: hidden;}
</style>
<script type="text/javascript" src='jquery-1.8.3.js'></script>
</head>
<body>
<section id="communityActivities">
<div id="picShow">
<img src="images/pic.jpg">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
<img src="images/pic3.jpg">
<img src="images/pic4.jpg">
</div>
<div id="picTitle">这是新闻标题啊</div>
</section>
<script type="text/javascript">
function picTurn(elementId){
var $top = parseInt($(elementId).css('top'));
if ($top<-924) {
$top=231;
var $pic=$(elementId).find('img:first').remove();
$(elementId).find('img:last').append($pic);
};
$top -=231;
$top +='px';
$(elementId).animate({top:$top},"slow");
}
$(document).ready(function() {
setInterval("picTurn('#picShow')", 2000);
});
</script>
</body>
</html>
代码在这里了，下个jquery和几张图片就可以用，求大神帮我测一下，主要是想当循环播放到最后一张时又从第一张开始播放，过度和其他一样，就是类似第二张到第三张那样自然，而不是突然间刷的从第五张到第一张，一直测不好，求大神测好后告诉我，参考效果类似登陆后百度首页的新闻轮播，注意循环，最后一张到第一张的动画转换也是和其他一样的 展开
3个回答
展开全部
//js
var isround = "";
var i=0;
$(function(){
isround = setTimeout("change()",3000);
$("div[name=ban] div img:eq(0)").show().siblings().hide();
$(".num li:eq(0)").addClass("current").siblings().removeClass("current");
$(".num li").click(function(){
i=$(".num li").index(this);
$(this).addClass("current").siblings().removeClass("current");
$("div[name=ban] div img").eq($(".num li").index(this)).show().siblings().hide();
isround = setTimeout("change()",3000);
}).hover(function(){
clearTimeout(isround)
},function(){
isround = setTimeout("change()",3000);
})
})
function change(){
if(i==$(".num li").length) i=0;
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$("div[name=ban] div img").eq(i).show().siblings().hide();
i++;
setTimeout("change()",3000);
}
//html
<div name="ban">
<div>
<!--图片-->
<img src="/resources/images/f1.jpg" width="369px" height="114px" />
<img src="/resources/images/f2.jpg" width="369px" height="114px" />
<img src="/resources/images/f1.jpg" width="369px" height="114px" />
<img src="/resources/images/f2.jpg" width="369px" height="114px" />
<img src="/resources/images/f1.jpg" width="369px" height="114px" />
</div>
<div class="numbox">
<!--选项-->
<ul class="num">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
不懂再问，这是我自己写的一个轮换，里面包括了点击事件，原理是控制图片的显示隐藏，
别的有控制高度等等之类的 。
追问
大哥，我不是要代码，要的话网上一大堆，主要是为了学习啊，上面是我自己写的，就是不知道怎么解决才来请教的
追答
setTimeout 用这个控制试试
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
循环播放的话大多采用在滚动到最后一张时，在最后一张图片后添加一整组图片，同时移除前面的所有图片。
追问
能针对我的例子帮我修改一下吗？或者给个详细的思路也行，谢谢啦
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
基于你的代码进行更改优化,实现最后一张到第一张的平滑切换
主要思路是:
每切换一次就将第一张放置于最后
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
