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

热心网友

循环播放的话大多采用在滚动到最后一张时，在最后一张图片后添加一整组图片，同时移除前面的所有图片。追问能针对我的例子帮我修改一下吗？或者给个详细的思路也行，谢谢啦

热心网友

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

主要思路是:

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