常见轮播图实现效果

<script>
    //获取元素
    var play = document.querySelector('#play');  //包裹元素
    var imageItems = play.querySelectorAll('.image-list li'); //所有图片的集合
    var iconItems = play.querySelectorAll('.icon-list li');  //所有的控制按钮元素
    var prevBtn = play.querySelector('.prev-btn'); //上一张的按钮
    var nextBtn = play.querySelector('.next-btn'); //下一张的按钮
    var currentIndex = 0; //标记当前显示的图片的索引
    var itemLength = iconItems.length; //图片的数量
    var duration = 3000;  //自动播放时间间隔

    // 给每一个控制按钮 绑定单击事件
    iconItems.forEach(function (iconItem, index) {
        iconItem.onclick = function(){
            //重新设置索引标记
            currentIndex = index;
            //设置高亮
            setPlay();
        }
    });
    //点击上一张
    prevBtn.onclick = function() {
        setIndex('prev');
    };

    //点击下一张
    nextBtn.onclick = function(){
        setIndex('next');
    };

    // 自动播放
    var intervalId = setInterval(function () {
        setIndex('next');
    }, duration);

    // 鼠标悬停在轮播图上，停止定时
    play.onmouseenter = function () {
        clearInterval(intervalId);
    };

    //鼠标离开轮播图，轮播继续
    play.onmouseleave = function(){
      intervalId = setInterval(function(){
          setIndex('next');
      }, duration);
    };

    /**
     * @param tag 值是prev表示上一张， 值是next表示下一张
     */
    function setIndex(tag) {
        if (tag === 'prev') {
            //当前的索引 -1
            currentIndex --;
            //判断范围
            if (currentIndex < 0) {
                currentIndex = itemLength - 1;
            }
            //设置高亮
            setPlay();
        } else if (tag === 'next') {
            //当前的索引标记 +1
            currentIndex ++;
            //如果 currentIndex 超出范围
            if (currentIndex > itemLength - 1) {
                currentIndex = 0;
            }
            //设置高亮
            setPlay();
        }
    }

    // 实现根据 currentIndex 显示当前的图片和控制按钮
    function setPlay() {
        //排他 所有控制按钮的取消高亮，所有图片的隐藏
        iconItems.forEach(function (item, index) {
            item.classList.remove('current');
            imageItems[index].classList.remove('current');
        });
        //当前控制按钮设置高亮 当前的图片显示
        iconItems[currentIndex].classList.add('current');
        imageItems[currentIndex].classList.add('current');
    }
</script>

#### jQuery实现代码