原生js，实现bilibili幻灯片切换效果

果然我还是太依赖jquery的便捷性了，以至于基本的javascript都难以正常的使用，但大多数的js框架都是需要原生js基础的，比如vue.js，所以去学习熟练基础的javascript真的很有必要。

最近正好在制作相关项目，然后就是需要做到bilibili幻灯片相同的切换效果，本来想拿vue弄的，但是一看网上的参考，是真的有些迷茫，于是推而求其次，用原生js写了，到时候数据的渲染加载再用vue吧。

css和html的代码是直接参考b站的写法，而且没有进一步完善精简，不过大概的逻辑很明确了，精简的难度也就不大了。

至于js就是基于bilibili的页面结构重新用原生js写的，最后实现和官方基本相同的效果。

1.首先确定html的代码，包括图片列表，表情列表，按钮列表。

<div class="carousel-box">
    <div class="carousel-module">
        <div class="panel">
            <ul class="pic" id="pic">
                <li class="scrollx on">
                    <a href="#" target="_blank">
                        <img src="images/s1.jpg" alt="" width="440" height="220">
                    </a>
                    <a href="#" target="_blank" class="more-text">更多</a>
                </li>
                <li class="scrollx off">
                    <a href="#" target="_blank" data-target-url="#">
                        <img src="images/s2.jpg" alt="一个公式带你解读天下英语" width="440" height="220"></a>
                    <a href="#" target="_blank" class="more-text">更多</a>
                </li>
                <li class="scrollx off">
                    <a href="#" target="_blank" data-target-url="#">
                        <img src="images/s3.jpg" alt="" width="440" height="220">
                    </a>
                    <a href="#" target="_blank" class="more-text">更多</a>
                </li>
                <li class="scrollx off">
                    <a href="#" target="_blank">
                        <img src="images/s4.jpg" alt="" width="440" height="220">
                    </a>
                    <a href="#" target="_blank" class="more-text">更多</a>
                </li>
                <li class="scrollx off">
                    <a href="#" target="_blank">
                        <img src="images/s5.jpg" alt="" width="440" height="220">
                    </a>
                    <a href="#l" target="_blank" class="more-text">更多</a>
                </li>
            </ul>
            <ul class="title" id="title">
                <a href="#" target="_blank" class="on">
                  做真香料理，赢豪华奖励
                </a>
                <a href="#" target="_blank" class="">
                  一个公式带你解读天下英语
                </a>
                <a href="#" target="_blank" class="">
                  Apex：成为英雄！
                </a>
                <a href="#" target="_blank" class="">
                  社团还能这么搞~
                </a>
                <a href="#" target="_blank" class="">
                  为美丽的生命献上花朵
                </a>
            </ul>
            <ul class="trig" id="trig">
                <span class="on" onClick="topic(1)"></span>
                <span class="" onClick="topic(2)"></span>
                <span class="" onClick="topic(3)"></span>
                <span class="" onClick="topic(4)"></span>
                <span class="" onClick="topic(5)"></span>
            </ul>
        </div>
    </div>
</div>

可以看到上述所说的三个部分，分别创建三个ul给了三个ID：pic,title,trig。

2.开始设置css样式，我直接借鉴的b

/* 这里是我补充的全局样式 */
body,button,input,select,textarea{font:12px Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;}
article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul{margin:0;padding:0;}
html {background:#fff;
color:#000;}
ul li{list-style:none;}
/*幻灯片样式开始*/
.chief-recommend-module {
padding-bottom:40px;}
.clearfix{zoom:1;}
.clearfix:after, .clearfix:before{content: "";
display:table;}
.clearfix:after{clear:both;
overflow:hidden;}
.clearfix:after,.clearfix:before {
content:"";
display:table;}
.chief-recommend-module .carousel-box{width: 440px;
height:220px;
float:left;}
.carousel-module, .carousel-module .panel{position: relative;
width:100%;
height:100%;}
.chief-recommend-module .carousel-box .carousel-module .panel{border-radius:4px;}
.carousel-module .panel{overflow:hidden;}
.carousel-module .panel .pic{z-index:1;
position:relative;
transition:all .3s;}
.carousel-module .panel .pic li{position:relative;
width:440px;
height:220px;}
.carousel-module .panel .scrollx{float:left;}
.carousel-module .panel .pic li a{display:inline-block;}
.carousel-module .panel .title{z-index:2;
position:absolute;
bottom:0;
left:0;
width:100%;
height:35px;
line-height:35px;
background:rgba(0,0,0,.5);
font-size:14px;}
.chief-recommend-module .carousel-box .carousel-module .panel .title{background: -webkit-linear-gradient(transparent,rgba(0,0,0,.5));}
.carousel-module .panel .title a{position:absolute;
width:100%;
color:#fff;
text-decoration:none;
padding-left:10px;
opacity:0;
z-index:-1;
transition:all .3s;}
.chief-recommend-module .carousel-box .carousel-module .panel .title a{width:280px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;}
.carousel-module .panel .title a.on{opacity: 1;
z-index:1;}
.carousel-module .panel .trig{position:absolute;
z-index:3;
bottom:6px;
right:20px;}
.carousel-module .panel .trig span{display:inline-block;
width:10px;
height:10px;
margin-left:8px;
border-radius:10px;
background:#fff;
cursor:pointer;
transition:all .3s;}
.chief-recommend-module .carousel-box .carousel-module .panel .trig span{width:18px;
height:18px;
background-image:url(../asserts/icons.png);
background-position:-855px -790px;
background-color:transparent;
transition:none;}
.chief-recommend-module .carousel-box .carousel-module .panel .trig span:hover{background-position: -919px -790px;}
.chief-recommend-module .carousel-box .carousel-module .panel .trig span.on{background-position:-855px -727px;
width:18px;
height:18px;}
.carousel-module .panel .trig span.on{width:30px;
background:#f45d8f;}

其实就是通过css3的动画定义，省略了js的动画过渡效果，同时引用了一个icons.png里面的图标。做完这一步，幻灯片区域就如下所示了，只不过还不会动。

3.随即，js就登场了，主要代码如下：

首先定义两个全局方法，addclass和removeclass：

function addClass(element, className) { if(!new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className)) element.className += ' ' + className; } function removeClass(element, className) { element.className = element.className.replace(new RegExp("(^|\\s)" + className + "(?=(\\s|$))", "g"), ''); }

随后是幻灯片正式代码

var PicList = document.getElementById('pic');  //获取图片区块
var PicNum = PicList.children.length;  //计算内部图片数量
var title = document.getElementById("title"); //获取标题区块
var trig = document.getElementById("trig");  //获取小按钮区块
PicList.style.width = PicNum * 100+"%";  //初始化图片区块的宽度
var sum = 0;  //初始化margin-left的基础计算参数
var num = 0;  //初始化标题和按钮的基础计算参数
//开始按钮的点击定位事件，从html传的参数
function topic(btn){
    Array.from(trig.children).forEach(function(item){  //循环去除标题的class
        removeClass(item, 'on');
    });
    Array.from(title.children).forEach(function(item){  //循环去除按钮的class
        removeClass(item, 'on');
    });
    num = btn - 1;  //获取当前点击按钮后，标题和按钮的位置
    sum = -num * 100; //获取当前点击按钮后，图片列表的移动距离（也可以理解为位置）
    PicList.style.marginLeft = sum+"%";  //移动图片
    addClass(title.children[num], 'on'); //给定位标题添加class
    addClass(trig.children[num], 'on'); //给定位按钮添加class
}
PicList.style.marginLeft=sum+"%";  //在没有点击定位事件时，图片列表默认移动距离
//幻灯片轮播效果开始
window.setInterval("Slide()",5000);  //设置动画事件的执行间隔
//动画事件
function Slide(){
    sum = sum - 100;  //每次执行图片偏移量参数
    num = num + 1;  //每次执行，按钮和标题的定位参数
    if(num >= PicNum){  //如果该定位参数大于或等于图片数量，则归零
        num = 0;
    }
    if(sum < -(PicNum - 1) * 100){ //如果图片偏移量参数小于倒数第一章图片时的偏移量，则归零
        sum = 0;
    }
    PicList.style.marginLeft = sum+"%"; //将每次执行的偏移量结果给图片列表，形成图片轮播动画
    if (num > 0){  //在按钮和标题的定位参数大于零的时候，去掉前一位元素的class
        addClass(title.children[num], 'on');
        addClass(trig.children[num], 'on');
        removeClass(title.children[num - 1], 'on');
        removeClass(trig.children[num - 1], 'on');
    } else {   //否则（其实就是小于或者等于零的时候），去掉最后一位元素的class，并且重新给第一位元素添加class
        removeClass(title.children[PicNum - 1], 'on');
        removeClass(trig.children[PicNum - 1], 'on');
        addClass(title.children[0], 'on');
        addClass(trig.children[0], 'on');
    }
}

js的代码我写得无比详细了，大概理解一下逻辑就会很简单，话说js真的比jQuery麻烦不止一点啊，但是该练习的时候还是得练习。

4.最后，我就不提供主要代码的下载了，因为已经整合进项目，但是图片素材的下载还是可以的，都是抓取b站。 如果链接挂了可以在评论留言，如果想要更详细的代码可以加群讨论。

下载地址： https://cdn.ruletree.club/usr/uploads/2019/02/4238191522.zip