11-15.JS轮播、专辑、放大镜

轮播JS代码：

$(function(){

  var current = 0;

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

//移入方法

function move(){

    $(".pics-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);

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

clearIntervar(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();

    })

})

专辑JS代码：

$(function(){

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

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

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

    //     console.log(height)

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

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

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

    // }else{

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

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

    //     }

    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"});//收缩

    }

    })

})

放大镜JS代码：

$(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){

        // 鼠标位置

        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"

        })

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

           top: -2 * top + "px",

           left: -2 * left + "px"

       });      

    })

})