前端程序员小知识《简单上手教你如何用原生JS+CSS写轮播图》

如何用原生JS写轮播图，可能很多人在写轮播图喜欢用插件，因为简单嘛也能省下很多的代码量
这里呢给大家分享一下如何在不用插件使用·原生JS去写轮播图，不喜勿喷，可以学习交流

<div>
        <ul id="one">
            <li class="show"><img src="./img/tg.jpg" alt=""></li>
            <li><img src="./img/tg2.jpg" alt=""></li>
            <li><img src="./img/tg3.jpg" alt=""></li>
            <li><img src="./img/tg4.jpg" alt=""></li>
        </ul>
        <ul id="two">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

我们先生成一个DIV盒子作为我们的展示区，上面的ul li标签则是我们需要轮播的图片，下面的第二组
ul li标签则是我们提前预留出来的小标，用来点击切换到我们想要切换的位置，以及现在轮播到哪一张了。

*{
            margin: 0PX;
            padding: 0px;
        }/* 干掉所有的margin和padding */
        div{
            width: 780px;
            height: 360px;
            overflow: hidden;
       }  /*给盒子宽高让超出的部分隐藏 */
        img{
            width: 780px;
            height: 300px;
        }/*给上图片宽高*/
        #one li{
            width: 780px;
            height: 300px;
            position: absolute;
            z-index: -1;
            opacity: 0;
            transition: 1s ease-in;
        }/* 这里的每个li标签就是我们所要轮播的图片框 ，opacity让图片暂时隐藏*/
        /* 然后定位到下面动起来。这样上面就能展示出我们需要看到的样子*/
        #two{
            position: absolute;
            left: 15%;
            top: 33%;
        }/* 这里我们将小标进行定位到图片的下方 */
        #two li{
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid black;
            text-align: center;
            margin: 0px 5px;
            cursor: pointer;
        }/* 给小标加上样式 */
        #one .show{
            opacity: 1;
        }
        /* 让框内的一张图片显示下面通过JS更改CLASS名进行轮播 */
        #two .on{
            border: 1px solid orange;
        }
        /* 小标也要跟着动这样也要给小标一个显眼的颜色 */

接下来我们给上样式，上面都标明了注释，需要注意的是
先opacity将图片设成透明，然后置于下层
然后给第一个li一个class设为不透明。

接下来就是JS部分了，内容也比较少

<script>
        var imgList = document.getElementById('one').getElementsByTagName('li')
        //这里获取one和下面的所有li 
        var list = document.getElementById('two').getElementsByTagName('li')
        // 获取小标two的所有li
        var index = 0
        var timer
        // 设置定时器
        for (var i = 0 ; i < list.length; i++){
            // 这里用一个FOR循环
            list[i].index = i
            list[i].onmouseover = function(){
                var clickIndex = parseInt(this.index)
                index = clickIndex
                moveImg(imgList,index)
                moveIndex(list,index)
                clearInterval(timer)
            };
            list[i].onmouseout = function(){
                play()
            }
        }
        var nextmove = function(){
            index += 1
            if(index >= 4){
                index = 0
                // 这里要分析当到第四的时候我们要重置回到原来的起点
            }
            moveImg(imgList,index)
            moveIndex(list,index)
            // 图片和小标要同时移动
           
        }
        var play = function(){
            timer = setInterval(function(){
                nextmove()
            },2000)
        } 
        
        play()
        function moveImg(list,index){
            for (var i = 0;i < list.length;i++){
                if(list[i].className == 'show'){
                    list[i].className = ''
                }
                //这里需要注意的是当我们这张图片显示后我们要
                //隐藏这张，然后去显示下一张，传递
            }
            list[index].className = 'show'
            //将下一个LI的classname变为show
        }
        function moveIndex(list,num){
            for(var i = 0;i<list.length;i++){
                if(list[i].className =='on'){
                    list[i].className = ''
                }
            }
            list[num].className = 'on'
        }
        // 小标也是同理进行显示
    </script>
其实代码量也不是很多，比较简单
下面是效果图

```javascript
在这里插入代码片

下面是效果图·