这个是我改过的,应该小圆点比较正常

jike_8606213 jQuery 制作无缝轮播的焦... 最后由 green_water 于2017年09月26日回复

  • 1 回答
  • 887 浏览

$(function(){

    

var img=$(".banner .img");

    var clone=$(".banner .img li").first().clone();

    img.append(clone);

    

    var size=$(".banner .img li").size();

    for(var i=0;i<size-1;i++){

        $(".num").append('<li></li>')

    }

$(".num li").first().addClass("on")

var timer=null;

    var i=0;

    var o=0;

    

    //右移动

    $(".btn_r").click(function(){

     moveR();

    

    })

    function moveR(){

        i++;

if(i==size){

         img.css({left:0})

         i=1

     }

     img.stop().animate({left:-i*550},500)

     //避免出现i=最后一张克隆图片的情况

     var o=i;

     if(o==4){

         o=0

     }

     $(".num li").eq(o).addClass("on").siblings().removeClass("on");

    }

    //左移动

    $(".btn_l").click(function(){

        i--;

        if(i==-1){

            img.css({left:-(size-1)*550})

            i=size-2;

        }

        img.stop().animate({left:-i*550},500)

        $(".num li").eq(i).addClass("on").siblings().removeClass("on");

        

    })

    //鼠标划入小圆点

    $(".num li").hover(function(){

        $(this).addClass("on").siblings().removeClass("on");

        var index=$(this).index();

        img.stop().animate({left:-index*550},500)

    })

    

    //自动轮播功能

timer=setInterval(function(){

moveR()

        },2000)

    $(".banner").hover(function(){

clearInterval(timer)

    },function(){

timer=setInterval(function(){

moveR()

        },2000)

    })

})

  • green_water 2017年09月26日 回答 #1楼
  • 亲爱的jike_8606213能够把问题描述清楚,比如需要帮你解决什么问题,从目前你的标题不知道如何下手解决你的问题

  • 0 评论