优设是一个设计师喜欢的网站，仿一个它的幻灯片。

点击图片查看具体效果。

功能：

1、数组存放图片路径和标题信息。

2、点击上一张、下一张图片滑动切换。

3、图片切换的时候标题的高亮对应切换。

4、点击标题可以切换到对应的图片。

5、自动播放图片，鼠标经过幻灯，停止自动播放，移开又恢复自动播放。

核心代码：

        // 初始化值
        const url = ["images/1.png", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg"];
        const title = ["手绘课程", "手绘技法", "ps合成", "品牌设计", "海报设计", "软件班"];
        const len = url.length;

        // 找对象
        const oBanner = $('.banner');
        const oUl = $('.pic-lists');
        const oUlTitle = $('.title-lists');
        const oBtnNext = $('.next');
        const oBtnPrev = $('.prev');
        const oLisTitle = oUlTitle.getElementsByTagName('li');

        // 初始化界面
        let str = ''
        url.forEach(function (item) {
            str += `<li><a href="#"><img src="${item}"></a></li>`;
        })
        oUl.innerHTML = str;
        let str1 = '';
        title.forEach(function (item) {
            str1 += `<li><a href="#">${item}</a></li>`
        })
        oUlTitle.innerHTML = str1;
        let num = 0;
        oLisTitle[num].classList.add('active');
        let width = parseInt(getComputedStyle(oBanner).width);
        // console.log(width)
        // 点击下一张，让ul整体往左边移动一张图片的宽度
        oBtnNext.onclick = function () {
            num++;
            if (num >= len) {
                num = 0;
            }
            tab(num);
        }
        // 点击上一张
        oBtnPrev.onclick = function () {
            num--;
            if (num <= -1) {
                num = len - 1;
            }
            tab(num);
        }

        let timer = null;
        // 初始化自动播放
        autoPlay();

        oBanner.addEventListener('mouseenter', function () {
            clearInterval(timer);
        })
        oBanner.addEventListener('mouseleave', function () {
            // 再开定时器的时候，确保前面的定时器已经关闭。
            autoPlay();
        })
        // 自动播放函数
        function autoPlay() {
            timer = setInterval(function () {
                num++;
                if (num >= len) {
                    num = 0;
                }
                tab(num);
                console.log(timer)
            }, 3000)
        }
        // 点击标题切换
        for (let i = 0; i < oLisTitle.length; i++) {
            oLisTitle[i].addEventListener('click', function () {
                num = i;
                tab(num);
            })
        }
        // 幻灯切换函数
        function tab(num) {
            oUl.style.transform = `translateX(-${width * num}px)`;
            [...oLisTitle].forEach(function (item) {
                item.classList.remove('active');
            })
            oLisTitle[num].classList.add('active');
        }

        function $(selector) {
            return document.querySelector(selector);
        }