前言:

刚刚起步开始学习前端,上传并总结一下自己写的案例,大佬勿喷,请多指教.

正文

今天学习了js实现简易的轮播图效果

css部分

* {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    body {
        display: flex;
        justify-content: center;
    }

    .banner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 500px;
        height: 290px;
        margin-top: 100px;
        box-shadow: 0 0 12px #333;
    }

    .pic li {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }

    .pic li.on {
        display: block;
    }

    .pic li img {
        width: 500px;
        height: 290px;
    }

    .slider {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        bottom: 10px;
        width: 380px;
    }

    .slider span {
        width: 45px;
        height: 45px;
        line-height: 45px;
        background-color: orange;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
    }

    .slider span.active {
        background-color: pink;
    }

    .btn-wrap span {
        user-select: none;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 40px;
        height: 85px;
        line-height: 85px;
        font-size: 32px;
        color: #fff;
        text-align: center;
        background-color: rgba(0, 0, 0, .4);
        cursor: pointer;
    }

    .btn-wrap span:hover {
        background-color: rgba(0, 0, 0, .8);
    }

    .prev {
        left: 0;
    }

    .next {
        right: 0;
    }

body部分

    <div class="banner">
        <ul class="pic">
            <li class="on bg333 c368"><img src="img1.png" alt=""></li>
            <li class="bg333 c368"><img src="img2.png" alt=""></li>
            <li class="bg333 c368"><img src="img3.png" alt=""></li>
            <li class="bg333 c368"><img src="img4.png" alt=""></li>
        </ul>
        <div class="slider">

        </div>
        <div class="btn-wrap">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
    </div>

js部分(拆解)

在制作轮播图前,首先要分析一下轮播图的结构

可以看到,这个简易的轮播图由三个结构组成,首先是图片,其次是左右两侧的切换按钮,最后是底部的悬浮按钮;根据这个结构,可以构造如上的结构代码。不仅如此，我们可以发现，当前图片与底部按钮会有联动效果，即当前图片被展示时，所对应的下标会有背景颜色的变化，且初始下标为1。

接下来就开始思考js的实现过程,首先要为按钮添加事件,添加事件的前提就是对按钮元素的选中;

这里我封装了两个函数,用于快速对元素进行选定;
function $(element){
return querySelector('element');
}

function $$(element){
return querySelectorAll('element');
}

var aPic = $$('.pic>li');
var oSlider = $('.slider');
var oPrev = $('.prev');
var oNext = $('.next');
var oBtnwrap = $('.btn-wrap');

为了更好的提高扩展性，底部的按钮我并没有写固定结构，而是通过轮播图片的数量利用js进行添加。同时，在这一步，可以直接将下标样式进行初始化默认选中。

var len = aPic.length 
function joinSpan (){
    var fragment = document.createDocumentFragment(); 
//这里选择使用fragment方法,将span批量添加到页面中,减少开销。
    var vDom; //创建虚拟节点
    for(var i = 0; i < len; i++){ //利用for循环,循环添加span到fragment中,直到数量与图片一致;
    vDom = document.createElement('span');
    vDom.innerText = i + 1; //给span添加内容，内容为当前图片序号
    fragment.appendChildren(vDom);//
    }
   oSlider.appendChildren(fragment); //将span同时添加到oSlider中；
   oSlider.children[0].className = 'active'; //将第一个设置为默认选中样式。
}
joinSpan();//执行

整体结构创建完毕，接下来就开始思考轮播图的工作方式是什么，我认为轮播图的工作方式是：

获取需要展示的图片的下标
将css样式添加到需要展示的图片上
清除上一个图片的css样式

通过改变样式实现轮播效果

样式修改(通过添加样式来实现轮播的效果)
function switchSlider(callback){
    aPic[index].classList.remove('on');
    oSlider.children[index].classList.remove('active');
    callback && callback(); //利用回调函数来获取通过事件操作的图片的下标，可以减少代码冗余；
    aPic[index].classList.add('on');
    oSlider.children[index].classList.add('active');
}

同时，由于该轮播图由两部分按钮组成，那么就有两种获取下标的方式

1.鼠标移入获取

鼠标移入获取
首先是获取固定下标
function getElementIdx(itm){
var elements = itm.parentNode.children; //获取item父级中的所有子元素（如果有itm的话，包括itm）。
    for(var i = 0; i < elements.length; i++){ 
        if(itm === elements[i]){ //将itm与element中的元素循环比较，如果发现与itm相等，则返回i，即返回itm所在的下标
        return i;
        }
    }
}
其次是将该函数添加到鼠标移动事件中；
oSlider.addEventListener('mouseover',function(e){
    if(e.target.tagName.toLowerCase === 'span'){
        switchSlider(function(){
            index = getElementIdx(e.target);
            })
    }
},false);

2.鼠标点击获取

  var btnTypeMap = {
            prev: function () {
                index--;
                index = (PicLen + index) % PicLen; 
            },
            next: function () {
                index++;
                index = index % PicLen; //通过取余的方式，使得图片下标循环始终为 0 1 2 3
            }
        }
  //通过对象的方式，将不同切换方式的index封装在一个对象内，减少冗余操作
oBtnwrap.addEventListener('click',function(e){
    if (e.target.tagName.toLowerCase() === 'span'){
        var eClassName = e.target.className; //获取点击的元素的类名，用类名区分切换顺序
         btnTypeMap[eClassName] && switchSlider(function () { //判断对象内是否拥有该类名所对应的index计算方法，如果有的话则执行该方法，并作为回调函数返回。
                    btnTypeMap[eClassName]()
                });
     };
},false)

通过以上代码，即可实现一个简易的轮播图。欢迎各位大佬指正。

轮播图案例实现

前言:

正文

css部分

body部分

js部分(拆解)