实现音悦效果

实现音悦轮播图效果 

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

    }

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

        next();

    })

    $(".buts>.prev").click(function(){

        if(current>0){

            current--;

        }else{

            current=count -1;

        }

        move();

    })

实现效果图

 top榜切换：

$(function(){

        $(".top-list .title").click(function(){

            $(this).addClass("active").siblings().removeClass("active");

            $(".top-list-main ul").eq($(this).index()).show().siblings().hide();

        })

    })

实现效果图：

 

实现详情页面的图片放大效果：

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

        var 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"

        })

    })

效果图：

专辑列表的查看更多与收起：

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

第一种方式

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

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

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

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

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

        // }else{

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

        //     $(this).closest(".filter-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"});

        }

    })

效果图：