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