11.16

overflow: hidden;在父元素上设置，子元素就不会超出父元素

 

轮播图

$(function(){

    var current=0;

    var count=$(".pics-list>li").length;

    //移动的方法

    function move(){

//执行方法 

        $(".points-list>li").eq(current).addClass("active").siblings().removeClass("active");

        $(".pics-list").css("left",-1200*current+"px");

    }

     //点击右箭头时起作用

    function next(){

        if(current<count-1){

            current++;

        }else{

            current=0;

        }

          move();

    }

         //鼠标移入移出时 定时器显示  移入 起作用 移出 不起作用(不需要定时器)

      var timer=setInterval(() => {

           next();

        }, 3000);

             鼠标悬浮hover时方法   鼠标放上去自动轮播时间停止 

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

               clearInterval(timer);

             },function(){

                timer=setInterval(() => {

                    next();

                 }, 3000);

             })

             

    //点击点的方法   点击点时 自动轮播到图片

    $(".points-list>li").click(function(){

        current=$(this).index();

        move();

    })

    $(".buts>.next").click(function(){

         next();

    })

  //点击左箭头时起作用

    $(".buts>.prev").click(function(){

        if(current>0){

            current--;

        }else{

            current=count-1;

        }

        move();

    })

})

$(function(){

    $(".top-list .title").click(function(){

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

        $(".top-list-main ul").eq((this).index()).show().siblings().hide();

    })

})

设置时间

• setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
• setTimeout() - 在指定的毫秒数后执行指定代码。

• clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。