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

相关