原生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)

 

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

还需努力!!!

　　

　　

标签：原生,box,changeImg,轮播,index,js,num,var,小圆点
来源： https://www.cnblogs.com/fastfastbiubiu/p/14220551.html