Jquery图片轮播循环问题,求大神指教,怎么实现循环播放?

<!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和几张图片就可以用,求大神帮我测一下,主要是想当循环播放到最后一张时又从第一张开始播放,过度和其他一样,就是类似第二张到第三张那样自然,而不是突然间刷的从第五张到第一张,一直测不好,求大神测好后告诉我,参考效果类似登陆后百度首页的新闻轮播,注意循环,最后一张到第一张的动画转换也是和其他一样的

//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 用这个控制试试

温馨提示:答案为网友推荐,仅供参考
第1个回答  2014-02-11
循环播放的话大多采用在滚动到最后一张时,在最后一张图片后添加一整组图片,同时移除前面的所有图片。追问

能针对我的例子帮我修改一下吗?或者给个详细的思路也行,谢谢啦

第2个回答  推荐于2016-10-23

基于你的代码进行更改优化,实现最后一张到第一张的平滑切换

主要思路是:

每切换一次就将第一张放置于最后

本回答被提问者采纳