原生js轮播图

先写结构：

最外层的div设置相对定位，其下一级子元素设置绝对定位。

 

    <div id="box">
        <div id="imgs">
            <a href="#"><img class="active" src="./images/dlk.png" alt=""></a>
            <a href="#"><img src="./images/xiao.png" alt=""></a>
            <a href="#"><img src="./images/kl.png" alt=""></a>
            <a href="#"><img src="./images/kq.png" alt=""></a>
        </div>
        <span class="iconfont icon-xiayizhang"></span>
        <span class="iconfont icon-xiayizhang1"></span>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

上一张下一张 按钮用的 iconfont。

再写样式：

.active 是当前选中样式   

   * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #box {
            width: 800px;
            height: 500px;
            margin: 100px auto;
            border: 1px solid brown;
            position: relative;
        }

        #box img {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
        }

        .iconfont {
            font-size: 40px;
        }

        #imgs .active {
            display: block;
        }

        #box span {
            position: absolute;
            top: 50%;
            cursor: pointer;
            transform: translateY(-50%);
        }

        #box span:nth-of-type(1) {
            left: 0;
        }

        #box span:nth-of-type(2) {
            right: 0;
        }

        #box ul {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        #box ul li {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: rgb(112, 37, 2);
            float: left;
            margin-left: 5px;
            cursor: pointer;
            box-shadow: 1px 1px 2px black;

        }

        #box ul .active {
            background-color: rgb(255, 155, 97);
            box-shadow: 1px 1px 5px 1px rgb(0, 238, 255);    
        }

 

最后js部分

1.怎样才能实现自动轮播？2.点击小圆点怎么实现切换图片？3.点击上一张下一张怎么实现切换图片？

思路：1.可以创建某个变量  var num = 0，让这个变量变化 num++，再设置定时器，定时执行某个函数  changeImg( )，将这个变量当作参数传入这个函数changeImg(num)。

　　　2.通过观察html结构，会发现图片数与小圆点数是一致的，那应该可以通过获取小圆点与图片索引下标，实现切换。比如点击第二个小圆点，就切换到第二张图片。

　　　3.还是与1中的那个变量与函数有关，点击上一张就让这个变量num--，点击下一张，就让这个变量 num++,再执行changeImg(num)。

        var Imgs = document.getElementById('imgs'); //获取图片父容器
        var aImgs = Imgs.getElementsByTagName('img'); //获取所有图片
        var preBtn = document.querySelectorAll('span')[0]; //上一张按钮
        var nextBtn = document.querySelectorAll('span')[1]; //下一张按钮
        var aLi = document.querySelectorAll('li'); //获取所有li  小圆点
        var num = 0; //此变量控制  自动播放 上一张或下一张  

        //清除图片及li样式
        function clearStyle() {
            for (var i = 0; i < aImgs.length; i++) {
                aImgs[i].removeAttribute('class');
                aLi[i].removeAttribute('class');
            }
        }

        function start() {
            //手动控制切换  给每个小圆点 添加点击事件 小圆点下标与图片下标一致，可达到小圆点与对应图片切换
            for (var i = 0; i < aLi.length; i++) {
                aLi[i].index = i;  //自定义属性  方便找到对应的li小圆点   用let更方便
                aLi[i].onclick = function () {
                    clearStyle();  //每次点击清除以前的样式
                    aImgs[this.index].setAttribute('class', 'active');  //给对应图片设置选中样式 
                    aLi[this.index].setAttribute('class', 'active');  //给对应li小圆点设置选中样式   
                }
            }

            //自动播放
            num++;
            changeImg(num);
            
            //上一张
            preBtn.onclick = function () {
                num--;
                changeImg(num);
            }
            //下一张
            nextBtn.onclick = function () {
                num++;
                changeImg(num);
            }
        }

        function changeImg(index) {
            //console.log(index);
            clearStyle();
            if (index == 4) {    //判断是否为最大图片数
                num = 0;
            }
            if (index < 0) {     //判断是否为最小图片数
                num = 0;
            }
            aImgs[num].setAttribute('class', 'active');
            aLi[num].setAttribute('class', 'active');
        }

        setInterval(start, 2000)

 

一边写，一边想，一开始思路也不是很清晰，最后思路写完整理的。还不是很完美，也没有动画效果。

还需努力!!!

 

第二版来了：将不同功能用函数封装起来，并且加入了淡入淡出动画效果。

动画效果在css部分加入：

  @keyframes animate {

            0% {

                opacity: 0;

            }

            100% {

                opacity: 1;

            }

        }

 

如果是从1到0效果会有问题，所以是从0到1。

然后在让当前图片拥有这个动画  

aImgs[index].style.animation = 'animate 1s linear';

这样就有淡入淡出的效果了。

 

下面是封装修改后的js代码

        var Imgs = document.getElementById('imgs'); //获取图片父容器
        var aImgs = Imgs.getElementsByTagName('img'); //获取所有图片
        var preBtn = document.querySelectorAll('span')[0]; //上一张按钮
        var nextBtn = document.querySelectorAll('span')[1]; //下一张按钮
        var aLi = document.querySelectorAll('li'); //获取所有li  小圆点
        var num = 0; //此变量控制  自动播放 上一张或下一张  

        //清除图片及li样式
        function clearStyle() {
            for (var i = 0; i < aImgs.length; i++) {
                aImgs[i].removeAttribute('class');
                aLi[i].removeAttribute('class');
            }
        }

        //设置图片及li样式
        function setStyle(index) {
            aImgs[index].style.animation = 'animate 1s linear';
            aImgs[index].setAttribute('class', 'active');
            aLi[index].setAttribute('class', 'active');
        }


        //切换图片
        function changeImg(index) {
            clearStyle();
            setStyle(index);
        }


        //手动控制切换  通过点击li小圆点实现
        function handPlay() {
            for (var i = 0; i < aLi.length; i++) {
                aLi[i].index = i;
                aLi[i].onclick = function () {
                    clearStyle();
                    aImgs[this.index].setAttribute('class', 'active');
                    aLi[this.index].setAttribute('class', 'active');
                }
            }
        }


        //自动播放  通过定时器固定时间执行，改变全局li_index的值，实现切换。
        function autoPlay() {
            changeImg(num);
            num++;
            if (num < 4 && num >= 0) {
                changeImg(num);
            } else {
                num = 0;
                changeImg(num);
            }
        }

       //这里有问题
        if (num < 4 && num >= 0) {
            //上一张  手动点击之后 减少全局li_index的值，实现切换。
            preBtn.onclick = function () {
                num--;
                changeImg(num);
            }
            //下一张  手动点击之后  增加全局li_index的值，实现切换。
            nextBtn.onclick = function () {
                num++;
                changeImg(num);
            }
        } else {
            preBtn.onclick = null;
            nextBtn.onclick = null;
        }


        setInterval(autoPlay, 2000);
        handPlay();

 

还存在的问题，num的值，在继续点preBtn会小于0，点nextBtn会大于3。if判断没起作用，我逻辑是，num在图片存在的范围内,才能点击切换图片，否则点击为空。感觉上是对的，但其实是错的。

于是我就各种尝试，历时3小时，终于解决了这个问题！

        //上一张  手动点击之后 减少全局num的值，实现切换。
        preBtn.onclick = function () {
            if (num < 0) {
                num = 0;

            } else {
                changeImg(num);
                num--;
            }
            console.log(num);


        }
        //下一张  手动点击之后  增加全局num的值，实现切换。
        nextBtn.onclick = function () {
            if (num > 3) {
                num = 3;
            } else {
                changeImg(num);
                num++;
            }
        }

思路是这样的：我在点击之后再判断num的值，如果不符合要求，就让他符合要求，否则才能执行图片切换。

但还有问题，在点击小圆点后，自动播放时不会从我当前小圆点往下或往上张自动播放，而是按原来的顺序播放。