前端JS轮播图样本

html：

<div>
        <ul id="one">
            <li class="show"><img src="img/pic1.jpg" alt=""></li>
            <li><img src="img/pic2.jpg" alt=""></li>
            <li><img src="img/pic3.jpg" alt=""></li>
            <li><img src="img/pic4.jpg" alt=""></li>
        </ul>
        <ul id="two">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

css:

        * {
            list-style: none;
        }
        
        div {
            width: 600px;
            height: 300px;
            margin: auto;
            overflow: hidden;
        }
        
        img {
            width: 600px;
            height: 300px;
        }
        
        #one li {
            width: 600px;
            height: 300px;
            position: absolute;
            z-index: -1;
            opacity: 0;
            transition: 1s ease-in;
        }
        
        #two {
            position: absolute;
            left: 50%;
            top: 35%;
            margin-left: -50px;
        }
        
        #two li {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #333;
            text-align: center;
            margin: 0px 5px;
            cursor: pointer;
        }
        
        #one .show {
            opacity: 1;
        }
        
        #two .on {
            border: 1px solid orange;
        }

JS源码：

var imgList = document.getElementById('one').getElementsByTagName('li')
        var list = document.getElementById('two').getElementsByTagName('li')
        var index = 0 //全局变量，也是角标的索引
        var timer
        for (var i = 0; i < list.length; i++) {
            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'
        }

        function moveIndex(list, num) {
            for (var i = 0; i < list.length; i++) {
                if (list[i].className == 'on') {
                    list[i].className = ''
                }
            }
            list[num].className = 'on'
        }