音悦商城jQuery部分

1.轮播图

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

jQuery部分：
$(function(){
    // current 当前的图片
    var current = 0; 
    var count = $(".pics-list>li").length;

    function move(){
        // 图片下面的点点随着图片跑
        $(".points-list>li").eq(current).addClass("active").siblings().removeClass("active");
         // -1200*current+"px"==》一个current*-1200是往左边跑一张图，
        // 当current为变量的时候，就是乘以多少(图片的宽度)就是第几张图，最后+"px"(像素)
        $(".pics-list").css("left",-1200 * current +"px");
    }
    // 1
    function next(){
        if (current < count -1) {
            current++;
        }else{
            current = 0;
        }
        move();
    }
    // 2 
   var timer = setInterval(() =>{
        next();
    },3000);

    $(".banner-box").hover(function(){
        // 鼠标的移入静止，暂停轮播
        clearInterval(timer);
    },function(){
        // 鼠标移出时，轮播继续
        timer = setInterval(() =>{
            next();
        },3000);
    });

    $(".points-list>li").click(function(){
        // 点击当前的索引
        current = $(this).index();
        move();
    });

    $(".buts>.next").click(function(){
        //  count - 1 是因为索引是从0开始的
        if (current < count - 1) {
            current++;
        }else{
            current = 0;
        }
      move();
    });
    // prev  上一个
    $(".buts>.prev").click(function(){
        //  count - 1 是因为索引是从0开始的
        if (current > 0) {
            current--;
        }else{
            current = count - 1;
        }
        move();
        // $(".points-list>li").eq(current).addClass("active").siblings().removeClass("active");
        // $(".pics-list").css("left",-1200 * current +"px");
    });

});

$(function(){
    $(".top-list .title").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
        // $(this).index() 点击当前的索引值--让它显示
        $(".top-list-main ul").eq($(this).index()).show().siblings().hide();
    });
});

2.放大镜的写法与应用

jQuery部分：

$(function(){
    // 放大镜的写法与应用
    $(".small_box").hover(function(){
        // find =》向内查找子节点
        $(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",
        })
    });
});

3.点击按钮实现切换

jQuery部分：

$(function(){
    $(".load-more").click(function(){
        
        // 方法一
        // var $list = $(this).closest(".filter-list");
        // 获取高度
        // var height = $list.css("height");
        // if (height==="30px") {
        //     $(this).addClass("active");
        //     // parent    closest
        //     $list.css({"overflow":"auto","height":"auto"}); 
        // } else {
        //     $(this).removeClass("active");
        //     $list.css({"overflow":"auto","height":"30px"}); 
        // }

        // 方法二
        // hasClass ()  =》是jQuery中的一个内置方法，用于检查具有指定类名的元素是否存在。
       if ($(this).hasClass("active")) { //active是收起
        //   隐藏内容==》 当显示时，隐藏其他内容  判断有没有这个类，
        // closest()==》 找第一个匹配的父节点  方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
            $(this).removeClass("active").closest(".filter-list").css({"overflow":"hidden","height":"30px"});
       } else {
        //    显示内容
            $(this).addClass("active").closest(".filter-list").css({"overflow":"auto","height":"auto"})
       }
    });
});