JS引用项目

<script src="./js/jquery-3.3.1.min.js"></script>

    <script src="./js/xxx.js"></script>

轮播图

$(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() 方法执行的函数代码。

语法：window.clearInterval(intervalVariable)

 

$(function(){

    $(".load-more").click(function(){

        // var $list=$(this).closest(".filter-list");

        // var height=$list.css("height");

        // if(height==="30px"){

        //     $("this").addClass("active");

        //     $list.css({"overflow":"auto","height":"auto"});

        // }else{

        //     $("this").removeClass("active");

        //     $list.css({"overflow":"hideen","height":"30px"});

        // }

       

        //closest方法获得匹配选择器的第一个祖先元素，找父节点 如果不是  i一直找

        if($(this).hasClass("active")){

            $(this).removeClass("active").closest(".filter-list").css({"overflow":"hidden","height":"30px"});

        }else{

            $(this).addClass("active").closest(".filter-list").css({"overflow":"auto","height":"auto"});

        }

    })

})

 

• closest() 方法返回被选元素的第一个祖先元素。
• 祖先是父、祖父、曾祖父，依此类推。

鼠标悬浮图片显示小黑框 右边显示图片精确图片

$(function(){

//图片悬浮效果

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

        $(this).find(".float_layer").show();

        $(".big_box").show();

    },function(){

        $(this).find(".float_layer").hide();

        $(".big_box").hide();

    })

    $(".small_box").mousemove(function(e){

        // console.log(e);

        //鼠标位置

        var x=e.offsetX,y=e.offsetY;

        //小黑框的左上角位置 -100 让鼠标永远在小黑框的中间

           var left=x-100,top=y-100;

           if(left<0){

            left=0;

           }

           if(top<0){

            top=0;

           }

           if(left>200){

               left=200;

           }

           if(top>200){

            top=200;

        }

           $(this).find(".float_layer").css({

               top:top+"px",

               left:left+"px"

            });

//大图片是800px是显示图片的两倍所以要*2 显示精确图时是大图片反方向所以是（-2）*top/left

            $(".big_box img").css({

               top:-2*top+"px",

               left:-2*left+"px"

            })

    })

})

 

find() 方法返回被选元素的后代元素。

后代是子、孙、曾孙，依此类推。