原生js轮播图

2021-01-01 18:33:27 阅读：218 来源： 互联网

标签：原生 box changeImg 轮播 index js num var 小圆点

先写结构：

最外层的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

原生js轮播图