使用JS和CSS编写轮播图

HTML部分

<div class="banner toubulunbo">
        <ul class="imgList">
            <li><img src="../picture/1.jpg" alt=""></li>
            <li><img src="../picture/2.jpg" alt=""></li>
            <li><img src="../picture/3.jpg" alt=""></li>
            <li><img src="../picture/4.jpg" alt=""></li>
        </ul>
        <div class="circle">
<!--            <a href="../picture/2.jpg"></a>-->
<!--            <a href="../picture/3.jpg"></a>-->
<!--            <a href="../picture/4.jpg"></a>-->
<!--            <a href="../picture/1.jpg"></a>-->
        </div>
</div>

CSS部分

.banner {
	width: 100%;
	margin: auto;
	border: none;
	height: 350px;
	position: relative;
	overflow: hidden;
}

.imgList {
	list-style: none;
	position: absolute;
}

.imgList img {
	width: 1000px;
	height: 500px;
}

.imgList li {
	float: left;
	margin-right: 20px;
}

.circle {
	position: absolute;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
}
.circle a {
	width: 15px;
	height: 15px;
	background: yellow;
	display: block;
	border-radius: 50%;
	opacity: .5;
	float: left;
	margin-right: 5px;
	cursor: pointer;
}

.circle a.hover {
	background: black;
	opacity: .8;
}

.toubulunbo {
	min-height: 50vw;
}

a标签作为跳转的页面，也可以使用，.circle a是a标签的渲染部分，HTML中a标签注解掉的是主体部分

JS部分

window.onload = function () {
            var imgList = document.querySelector('.imgList');
            var circle = document.querySelector('.circle');
            var thisIndex = 0;
            var imgListLi = imgList.children;
            var circleA = circle.children;
            var flag = true;
            imgList.style.width = imgList.children.length * 1020 + 'px';
            for (var i = 0; i < imgList.children.length; i++) {
                var aNode = document.createElement('a');
                aNode.setAttribute('index', i);	//设置自定义属性
                if (i == 0) {
                    aNode.className = 'hover';
                }
                circle.appendChild(aNode);
            }
            circle.addEventListener('click', function (e) {
                if (flag) {
                    flag = false;
                    // console.log(e.target);
                    if (e.target.nodeName != 'A') {
                        return false;
                    }
                    thisIndex = e.target.getAttribute('index');
                    // imgList.style.left = -thisIndex * 620 + 'px';
                    slow(imgList, -thisIndex * 1020, function () {
                        flag = true;
                    });
                    circleChange();
                }
            })
            function antoChange() {
                setInterval(function () {
                    if (flag) {
                        flag = false;
                        if (thisIndex >= circleA.length) {
                            thisIndex = 0;
                        }
                        slow(imgList, -thisIndex * 1020, function () {
                            flag = true;
                        });
                        circleChange();
                        thisIndex++;
                    }
                }, 3000);
            }
            function circleChange() {
                for (var i = 0; i < circleA.length; i++) {
                    circleA[i].className = '';
                }
                circleA[thisIndex].className = 'hover';
            }
            function slow(obj, target, callback) {
                obj.myInter = setInterval(function () {
                    var offsetLeft = obj.offsetLeft;
                    var num = (target - offsetLeft) / 10;
                    num > 0 ? num = Math.ceil(num) : num = Math.floor(num);
                    if (offsetLeft == target) {
                        clearInterval(obj.myInter);
                        callback && callback();
                    } else {
                        obj.style.left = offsetLeft + num + 'px';
                    }
                }, 10)
            }
            antoChange();
        };

这些就是轮播图的整体构成了，希望可以帮到大家