原生js轮播图

<div class="box">
        <img src="imgs/1.jpg" alt="">
        <div class="gt">
            &gt;
        </div>
        <div class="lt">
            &lt;
        </div>
    </div>
    <ul>
        <li class="a">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>

 var i = 1;
        var timer = null;
        var lis = document.getElementsByTagName("li")
        var imgs = document.getElementsByTagName("img")[0]
        var gt = document.getElementsByClassName("gt")[0]
        var lt = document.getElementsByClassName("lt")[0]
        timer = setInterval(start, 1000)

//主要的函数
 function step() {
            if (i < 1) {
                i = 7
            }
            if (i > 7) {
                i = 1;
            }

            // 图片的src地址
            imgs.src = "imgs/" + i + ".jpg";
            // 图片轮播清空小圆点的背景颜色 ，不然图片轮播一次小圆点的背景加一次
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = ""
            }
            // 
            lis[i - 1].className = "a"
        }

		function start() {
            i++;
            step()
        }

        // 点击左右切换图片
        gt.onclick = start
        lt.onclick = function() {
            i--;
            step()
        }


		// 鼠标移入图片停止定时器
        var box = document.getElementsByClassName("box")[0]
        box.onmouseover = function() {
                clearInterval(timer)
            }
            // 鼠标移除开启定时器
        box.onmouseout = function() {
            timer = setInterval(start, 1000)
        }
	// 小圆点的切换
	function cli() {
            for (var k = 0; k < lis.length; k++) {
                lis[k].id = k;
                // console.log(lis[k].id);
                lis[k].onmouseover = function() {
                    i = this.id;
                    start()
                    clearInterval(timer);
                }
                lis[k].onmouseout = function() {
                    i = this.id;
                    start();
                    timer = setInterval(start, 1000)
                }
            }
        }
        cli();

css的轮播图

 <div class="no">
        <ul class="yes">
            <li><img src="imgs/1.jpg" alt="" /></li>
            <li><img src="imgs/2.jpg" alt="" /></li>
            <li><img src="imgs/3.jpg" alt="" /></li>
            <li><img src="imgs/4.jpg" alt="" /></li>
            <li><img src="imgs/5.jpg" alt="" /></li>
            <li><img src="imgs/6.jpg" alt="" /></li>
            <li><img src="imgs/7.jpg" alt="" /></li>
        </ul>
    </div>

 * {
            margin: 0px;
            padding: 0px;
            /* text-decoration: none; */
        }
        
        ul {
            list-style: none;
        }
        
        .no {
            margin-left: 15%;
            margin-top: 15%;
            /* background: greenyellow; */
            padding-bottom: 10px;
            padding-top: 10px;
            /* border: 10px solid fuchsia; */
            position: relative;
            width: 500px;
            height: 400px;
            overflow: hidden;
        }
        
        .yes {
            width: 4510px;
            position: absolute;
            left: 0;
            transition: all .5s;
            animation: focusmap 10s steps(7, end) infinite;
        }
        
        @keyframes focusmap {
            from {
                left: 0px;
            }
            to {
                left: -3500px;
            }
        }
        
        .yes li {
            float: left;
            transition: all .5s;
            
        }
        
        .yes li img {
            width: 500px;
            height: 400px;
            transition: all .5s;
        }