网站首页 » 前端开发 » JavaScript » 仿 PC 端网易云音乐图片轮播效果
上一篇:
下一篇:

仿 PC 端网易云音乐图片轮播效果

本文给大家分享一个仿 PC 端网易云音乐图片轮播效果,代码基于 jQuery 开发,虽然仿得不是十分像,但基本的效果还是做出来了,有需要的朋友可以看看。为了不浪费你的时间,如果是 JS 大神请略过本文,当作什么都没发生过。

效果演示:http://yunkus.com/demo/clone-netease-cloud-music-picture-carousel/

HTML代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>仿 PC 端网易云音乐图片轮播效果</title>
<meta name="description" content="一个还算不错的仿 PC 端网易云音乐图片轮播效果" />
<meta name="keywords" content="网易云音乐图片轮播效果,图片轮播" />
<link href="./css/style.css" rel="stylesheet">
</head>
<body>
<div class="home-bxsdow" style="margin: 150px auto 0;width: 750px;">
  <div class="banner">
    <div class="banner-show ctrl1">
      <ul class="banner-list">
        <li><a href=""><img src="../lib/images/demo-1.jpg" alt=""></a><div class="banner-mark"></div></li>
        <li><a href=""><img src="../lib/images/demo-2.jpg" alt=""></a><div class="banner-mark"></div></li>
        <li><a href=""><img src="../lib/images/demo-3.jpg" alt=""></a><div class="banner-mark"></div></li>
        <li><a href=""><img src="../lib/images/demo-4.jpg" alt=""></a><div class="banner-mark"></div></li>
        <li><a href=""><img src="../lib/images/demo-5.jpg" alt=""></a><div class="banner-mark"></div></li>
        <li><a href=""><img src="../lib/images/demo-6.jpg" alt=""></a><div class="banner-mark"></div></li>
        <li><a href=""><img src="../lib/images/demo-7.jpg" alt=""></a><div class="banner-mark"></div></li>
        <li><a href=""><img src="../lib/images/demo-8.jpg" alt=""></a><div class="banner-mark"></div></li>
        <li><a href=""><img src="../lib/images/demo-9.jpg" alt=""></a><div class="banner-mark"></div></li>
      </ul>
    </div>
    <div class="banner-index text-center"></div>
  </div>
</div>
<script src="../lib/jquery-3.1.1.min.js"></script>
<script src="./js/banner.js"></script>
</body>
</html>

CSS 代码

style.css 文件代码如下:

*{padding: 0;margin: 0;border:none}
ul{list-style: none;}

.banner {
    position: relative;
    width: 750px;
    height: 175px;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
}

.banner-list {
    position: relative;
    width: 750px;
    height: 175px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.banner-list li {
    position: absolute;
    top: 0;
    height: 175px;
    cursor: pointer;
}

.banner-list li img {
    width: 375px;
    height: 175px;
}

.banner-list li.active {
    left: 138px;
}

.banner-index {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.banner-index a {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    margin-left: 5px;
    border-radius: 50%;
    background-color: #fff;
}

.banner-index a.active {
    background-color: #a59d9a;
}

.banner-mark {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: .5;
}

JavaScript 代码

banner.js 文件代码如下:

bannerPlayer();

function bannerPlayer(){
    var bLi = $(".banner-list li");
    var bLen = bLi.length;
    var bLiW = bLi.width();
    var bWrap = $(".banner-list");
    bWrap.width($(".banner").width());
    var bShow = ($(".banner-list").width() - $(".banner-list li").width()) / 2;
    var bIndexWrap = $(".banner-index");
    var indexHtml = "";
    var inum = 0;
    var bIndex = "";
    var bTimer = null;
    var autoTime = 2500;

    // 初始化
    bIndexInit();
    bshowTime(0,1,2);

    // 启用定时器
    bTimer =  setInterval(function(){
        bAutoPlay();
     },autoTime);

    function indexChange(id){
        for(var i=0;i<bLen;i++){
            bIndex.eq(i).removeClass("active"); 
        }
        bIndex.eq(id).addClass("active"); 
    }

    //操作需要置前的三张图片
    function bshowTime(b1,b2,b3) {
       for(var i=0;i<bLen;i++){
            if(i!=b1 && i!=b2 && i!=b3){
                bLi.eq(i).animate({
                    "z-index": 0,
                    "left": bLiW
                }).animate({
                    "z-index": 0,
                    "left": bShow
                }).find(".banner-mark").animate({
                    "opacity": 0.72
                });
            }
       }
        bLi.eq(b1).animate({
            "z-index": 1,
            "left": 0
        }).find(".banner-mark").animate({
            "opacity": 0.72
        });
        
        bLi.eq(b2).animate({
            "z-index": 3,
            "left": bShow
        }).find(".banner-mark").animate({
            "opacity": 0
        });

        bLi.eq(b3).animate({
            "z-index": 2,
            "left": bLiW
        }).find(".banner-mark").animate({
            "opacity": 0.72
        });
    }

    // 初始化焦点
    function bIndexInit(){
      for (var i = 0; i < bLen; i++) {
        indexHtml += '<a href="javascript:;"></a>';
        }
        //插入焦点a
        bIndexWrap.width(bWrap.width());
        bIndexWrap.html(indexHtml);

        //获取焦点a
        bIndex = $(".banner-index a");
        bIndex.eq(0).addClass("active");

        //点击切换
        bIndex.click(function () {
            if(inum != $(this).index()){
                inum = $(this).index();
                indexChange(inum);
                bshowTime(formatNumber(inum,bLen),formatNumber(inum+1,bLen),formatNumber(inum+2,bLen));
            }
        })  
    }

    // 序号循环处理
    function formatNumber(index,maxNum){
        var temp = null;
        if(index == maxNum){
            temp = 0;
        }else if(index == maxNum+1){
            temp = 1;
        }else{
            temp = index;
        }
        return temp;
    }

    // 自动轮播
    function bAutoPlay(){
        if(inum < bLen-1){
            inum++;
        }else{
             inum =0;
        }
        bshowTime(formatNumber(inum,bLen),formatNumber(inum+1,bLen),formatNumber(inum+2,bLen));
        indexChange(inum);
        
    }

    //鼠标移入移出,清除自动插入
    bWrap.mouseover(function () {
        clearInterval(bTimer);
    });
    bWrap.mouseout(function () {
        bTimer = setInterval(bAutoPlay, autoTime);
    });
    bIndexWrap.mouseover(function () {
        clearInterval(bTimer);
    });
    bIndexWrap.mouseout(function () {
        bTimer = setInterval(bAutoPlay, autoTime);
    });

}

此图片轮播支持三张有以上的图片数量。支持 IE8+ 及主流浏览器。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/clone-netease-cloud-music-picture-carousel/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END