CSS与JS学习案例（17）：网易云音乐轮播图

网易云音乐官网点这里

原版：

自己做的：

和原版相比，没有切换图片时的渐隐渐显效果。

HTML部分：

左右箭头图标：阿里巴巴矢量图标库
下方选中的白色圆点使用JS自动添加

<div class="container">
        <div class="bgbox"></div>
        <div class="picbox">
            <div class="pic">
                <div class="lis">
                    
                </div>
            </div>
            <div class="download">
                <div class="downbutton"></div>
            </div>
            <div class="icon left">
                <i class="iconfont">&#xe6e7;</i>
            </div>
            <div class="icon right">
                <i class="iconfont">&#xe6e8;</i>
            </div>
        </div>
    </div>

CSS部分：

右方下载框部分由图片代替
在浏览器窗口小于1110px时，将箭头往里面靠一些。

@font-face {
    font-family: 'iconfont';  /* project id 2257156 */
    src: url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.eot');
    src: url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.woff') format('woff'),
    url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_2257156_cwop9ejpl4c.svg#iconfont') format('svg');
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:36px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

*{margin: 0;padding: 0;}

body{
    height: 100vh;width: 100vw;
    
}

.container{
    width: 100%;height: 300px;
    position: relative;
    overflow: hidden;
}

.bgbox{
    position: absolute;
    width: 200%;height: 200%;
    z-index: 1;
    background-position: center center;
    background-size: 4000px;
    background-image: url(/css/17_网易云轮播图/cloudimg/1.jpg);
    filter: blur(20px);
}

.container .picbox {
    position: relative;
    width: 100%;max-width: 1000px;min-width:1000px;height: 300px;
    margin: 0 auto;
    z-index: 2;
}

.container .picbox .download{
    float: left;
    width: 25%;height: 100%;
    background-image: url(/css/17_网易云轮播图/cloudimg/downpic.png);
    background-size: cover;
    background-position: center center;
    box-shadow: 1px 0px 1px #000;
}

.container .picbox .download .downbutton{
    position: absolute;
    width: 220px;height: 55px;
    cursor: pointer;
    bottom: 45px;
    margin: 0 15px;
}


.container .picbox .pic{
    float: left;
    position: relative;
    width: 750px;height: 100%;
    background-image: url(/css/17_网易云轮播图/cloudimg/1.jpg);
    background-size: 105%;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}


.container .picbox .pic .lis{
    position: absolute;
    width: 740px;height: 30px; 
    bottom: 5px;
    background-color: #ffffff44;
    text-align: center;
    line-height: 30px;
}

.container .picbox .pic .lis .items{
    display: inline-block;
    width: 8px;height: 8px;
    margin: 0 10px;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
    cursor: pointer;
    z-index: 4;
}

.container .picbox .pic .lis .items:hover{
    background-color: red;
}
.container .picbox .pic .lis .items.checked{
    background-color: red;
}

.icon.left,.icon.right{
    font-size: 36px;
    position: absolute;
    width: 40px;height: 60px;
    color: #fff;
    top: 50%;transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
    cursor: pointer;
    z-index: 3;
}
.icon.left{
    left: -60px;
}
.icon.left:hover{
    background-color: rgba(0, 0, 0, .2);
}

.icon.right{
    right: -60px;
}
.icon.right:hover{
    background-color: rgba(0, 0, 0, .2);
}

@media screen and (max-width:1110px){
    .icon.left{
        left: 20px;
    }
    .icon.right{
        right: 20px;
    }
}

JS部分：
创建白色圆点时设置自定义属性index，根据index来决定显示显示哪一张图片。

var links =[
                {'image':'./cloudimg/1.jpg'},
                {'image':'./cloudimg/109951165537616198.jpg'},
                {'image':'./cloudimg/109951165537626620.jpg'},
                {'image':'./cloudimg/109951165537687380.jpg'},
                {'image':'./cloudimg/109951165538182770.jpg'},
            ];
        var currentIndex = -1;
        let Timer = null;
        let container = document.querySelector('.container');
        let lis = document.querySelector('.lis');
        let pic = document.querySelector('.pic');
        let bg = document.querySelector('.bgbox');
        let left = document.querySelector('.icon.left');
        let right = document.querySelector('.icon.right');
        

        let Init__=function(){
            
            for(let i=0;i<links.length;i++)
            {
                let item = document.createElement('a');
                item.setAttribute('class','items');
                item.setAttribute('href','#');
                item.setAttribute('data-index',i);
                lis.appendChild(item);
            }

        };

        let select=function(index){
            
            index = Number(index);

            // 越界超过 最大数量 links越界，直接返回
            if (index >= links.length) {
                return;
            }

            // 选中当前已选中的的直接返回
            if (currentIndex == index) {
                return;
            }

            // 取消当前的指示点选中状态
            if (currentIndex > -1) {
                lis.children[currentIndex].classList.remove('checked');
            }

            currentIndex = index;
            currentLink = links[currentIndex];
            bg.style.backgroundImage = 'url(' + currentLink.image + ')';
            pic.style.backgroundImage = 'url(' + currentLink.image + ')';
            
            lis.children[currentIndex].classList.add('checked');

        };

        let pic_play = function(){
            // 3000 执行1次
            Timer = setInterval(() => {
                // 获取新的index
                let index = currentIndex + 1;
                // 右翻越界等于最左侧元素
                if (index >= links.length) {
                    index = 0;
                }
                select(index);
            }, 3000);
        }

        let pic_stop =function(){
            if (Timer) {
                clearInterval(Timer);
                Timer = null;
            }
        }

        window.addEventListener('load', () => {
            Init__();
            select(0);
            bind();
            pic_play();
        });
        
        let bind = function(){
            left.addEventListener('click',function(){
                let index = currentIndex - 1;
                if (index < 0) {
                    index = links.length - 1;
                }
                select(index);
            });

            right.addEventListener('click',function(){
                let index = currentIndex + 1;
                if (index >= links.length) {
                    index = 0;
                }
                select(index);
            });

            for(let i in lis.children){
                if(lis.children.hasOwnProperty(i))
                {
                    lis.children[i].addEventListener('click', function(e){
                        e.preventDefault();
                        select(e.target.dataset.index);
                        console.log(e);
                    });
                }
            }

            // 绑定鼠标移入事件
            container.addEventListener('mouseover', () => {
                // 防止鼠标从子元素移出时触发
                pic_stop();
            });

            // 绑定鼠标移出事件
            container.addEventListener('mouseout', () => {
                // 防止鼠标从子元素移出时触发
                pic_play();
            });

            // 绑定鼠标移动事件
            container.addEventListener('mousemove', () => {
                pic_stop();
            });

        }

更多详细参考：仿制网易云音乐首页轮播图