轮播图效果

轮播图效果

HTML

<div class="wrapper positions" id="wrap">
        <div class="banner" id="banner">
            <div class="_lt" onclick="lts()">&lt;</div>
            <div class="_gt" onclick="gts()">&gt;</div>
            <img src="../img/1.jpg" alt="" style="z-index: 1;">
            <img src="../img/2.jpg" alt="">
            <img src="../img/3.jpg" alt="">
            <img src="../img/4.jpg" alt="">
        </div>
        <ul class="list" id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

CSS

* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.wrapper {
  width: 500px;
  margin: 100px auto;
}
.text-align {
  text-align: center;
}
.positions {
  position: relative;
}
.banner {
  width: 500px;
  height: 300px;
}
.banner > div {
  line-height: 300px;
  text-align: center;
  position: absolute;
  z-index: 999;
  font-size: 30px;
  width: 30px;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: none;
}
.banner:hover > div {
  display: block;
  cursor: pointer;
}
.banner > ._lt {
  left: 0;
}
.banner > ._gt {
  right: 0;
}
.banner > img {
  width: 500px;
  height: 300px;
  position: absolute;
}
.list {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}
.list > li {
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  float: left;
  border: 1px solid white;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.hover {
  background-color: yellow !important;
}

JS

var wrap = document.getElementById('wrap');
        var banner = document.getElementById('banner').getElementsByTagName('img');
        var list = document.getElementById('list').getElementsByTagName('li');
        var timer = '';
        var count = 0;
        var lt = document.getElementById('lt');
        var gt = document.getElementById('gt');

        // 遍历所有选项，清楚样式，在加上样式 实现划过切换至对应的图片
        function swtch(index) {
            for (let i = 0; i < list.length; i++) {
                //清楚当前样式
                list[i].className = ' ';
                banner[i].style.zIndex = '';
            }
            list[index].className = 'hover';
            banner[index].style.zIndex = '10';
        }

        //设置自动播放功能 
        function fmove() {
            if (count == banner.length) {
                count = 0;
            }
            swtch(count);
            // console.log(count);
            count++;
            timer = setTimeout(fmove, 3000);
        }
        fmove();

        // 左边边单击
        function lts() {
            count--;
            if (count == 0) {
                count = banner.length;
            }
            // console.log(count);
            swtch(count - 1);
        }
        // 右边单击

        function gts() {
            if (count == banner.length) {
                count = 0;
            }
            console.log(count);
            swtch(count);
            count++;
        }

        //鼠标移动
        for (let i = 0; i < list.length; i++) {
            list[i].onmouseenter = function () {
                clearTimeout(timer);
                count = i;
                swtch(count);
                //这里的的count直接让他从0开始,按照当前的值去操作，但之后输出去count会传递到全局那
            };
        };

        // 鼠标移入大盒子时，停止定时器
        wrap.onmouseenter = function () {
            clearTimeout(timer);
        }
        // 鼠标移出大盒子时，又开始执行
        wrap.onmouseleave = function () {
            fmove();
        }