放大镜效果：

通过jQuery插件形式来实现放大镜效果，当鼠标移动到small对象上方时，就会在large对象中显示大图的对应位置

 

 具体写法如下：

$(function(){
    $(".small_box").hover(function(){
        $(this).find(".float_layer").show();
        $(".big_box").show();
        },function(){
            $(this).find(".float_layer").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"
})
        })
})

运行出来的结果是，将鼠标放在图片上时，会显示被放大的图。

内容展开与收起：

当点击更多时，内容展开；当点击收起时，内容隐藏。

具体如下：

方式一：

 

方式二：

 轮播效果：

1.自动轮播；

2.当点击左边的‘<’时，轮播图显示上一张，当点击右边的‘>’时，轮播图显示下一张；

3.当点击对应的圆点时，图片显示。例如：点击第三个圆点，显示第三张图；

4.鼠标放上去，停止轮播，鼠标移开后继续轮播；

$(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();
    }

    setInterval(() => {
       next();
    },3000);

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

    $(".points-list>li").click(function(){
        current=$(this).index();    /*$(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();
    })
})