简易轮播图功能实现方法？

实现轮播图的方式有很多，今天听了袁老师的课程后真是受益匪浅，下面将简易的轮播图功能实现方法写出来。

HTML代码：

    <div class="container">
        <div class="carousel">
            <div class="item"><a href=""><img src="./img/1.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="./img/2.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="./img/3.jpg" alt=""></a></div>
            <div class="item"><a href=""><img src="./img/4.jpg" alt=""></a></div>
        </div>
        <div class="indicator">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

CSS代码：

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 360px;
            height: 393px;
            margin: 10px auto;
            overflow: hidden;/*重点 2 走马灯区域一次只能显示一张图片我们在这里设置overflow:hidden 这样其他图片就看不到了*/
            position: relative;/*相对定位*/
        }
        /* 走马灯区域carousel */
        .carousel{
            width: 100%;
            height: 100%;
            display:flex;/*重点 1 走马灯区域是横向排列的这里我们用到弹性盒子*/
            transition: 0.5s;/*区域性的变化会在0.5秒钟没改变*/
        }
        .container .carousel img{
            width: 360px;
            height: 393px;
            text-align: center;
        }
        /*指示区域*/
        .indicator{
            position: absolute;/*绝对定位，按照子绝父相*/
            bottom: 10px;
            display: flex;/*因为是横向布局就要用到弹性盒子display:flex*/
            left: 50%;
            transform:translateX(-50%);/*向左移动自身宽度的一半*/
        }
        .indicator span{
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
            margin: 0px 3px;
        }
        .indicator span.active{background-color: white;border-color: white;}

JavaScript代码：

<script>
var doms = {
    carousel:document.querySelector('.carousel'),
    indicator:document.querySelectorAll('.indicator span'),
};

/**
 * 移动轮播图到底几个板块
 * @param 
 */

function moveTo(index){
    doms.carousel.style.transform = `translateX(-${index}00%)`;/*-${index}00% 用到es6的魔法拼接*/
    // 或
    // doms.carousel.style.transform = `translateX(-${index * 100}%)`;
    // 指示器分成两部来完成？
    //1.去除当前选中的指示器
    var active =document.querySelector('.indicator span.active');//获取当前选中的指示器，
    //然后把他的类样式，classList去除掉active用remove
    active.classList.remove('active');
    //2.重新设置要选中的指示器
    doms.indicator[index].classList.add('active');
}
//最后我们再去注册一个事件，找到我们的所有指示器，然后去循环它，对每个指示器，
//去注册一个onclick的事件，当每个指示器被点击的时候，回调moveTo(),
//这个指示器所在的下标，就是我们要到的板块的下标。
doms.indicator.forEach(function(item,i){
    item.onclick = function(){
        moveTo(i);
    }
});
</script>

这样一个简易的轮播图功能就实现了。

推荐

推荐资讯

热门资讯