轮播图实现技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/Da_Bao_zi/article/details/122612037
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>当前页面</title>
	<style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }

        .list {
            width: 800px;
            height: 400px;
            list-style: none;
            position: relative;
            padding-left: 0;
        }

        .item {
            /*叠在一起	        */
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
            /*透明度*/
            opacity: 0;
            /*淡入淡出图片的效果*/
            transition: all .8s;
        }
        .item img{
            width: 100%;
            height: 100%;
        }

        .item:nth-child(1) {
            background-color: yellowgreen;
        }

        .item:nth-child(2) {
            background-color: red;
        }

        .item:nth-child(3) {
            background-color: blue;
        }

        .item:nth-child(4) {
            background-color: greenyellow;
        }

        .item:nth-child(5) {
            background-color: green;
        }

        .btn {
            width: 50px;
            height: 100px;
            position: absolute;
            top: 150px;
            z-index: 100;
        }

        #goPre {
            left: 0;
	        font-size: 30px;
        }

        #goNext {
            right: 0;
            font-size: 30px;
        }

        .item.active {
            opacity: 1;
            z-index: 10;
        }

        .pointList {
            padding-left: 0;
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 100;
        }

        .point {
            width: 10px;
            height: 10px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 100%;
            float: left;
            margin-right: 14px;
            border-style: solid;
            border-width: 2px;
            border-color: rgba(255, 255, 255, 0.6);

            /*放在点上又小手*/
            cursor: pointer;
        }

        .point.active {
            background-color: rgba(255, 255, 255, 0.8);
        }
	</style>
</head>
<body>
<div class="wrap">
	<ul class="list">
		<li class="item active"><img src="img/1.jpg "></li>
		<li class="item"><img src="img/2.jpg "></li>
		<li class="item"><img src="img/3.jpg "></li>
		<li class="item"><img src="img/4.jpg "></li>
		<li class="item"><img src="img/5.jpg "></li>
	</ul>
	<!--五个按钮-->
	<ul class="pointList">
		<!--data-index表示当前选中的点-->
		<li class="point active" data-index='0'></li>
		<li class="point" data-index='1'></li>
		<li class="point" data-index='2'></li>
		<li class="point" data-index='3'></li>
		<li class="point" data-index='4'></li>
	</ul>
	<button type="button" class="btn" id="goPre"><</button>
	<button type="button" class="btn" id="goNext">></button>
</div>
<script>
	var items = document.getElementsByClassName('item');//可以试试querySelector 图片
	var points = document.getElementsByClassName('point'); // 点
	var goPreBtn = document.getElementById('goPre');
	var goNextBtn = document.getElementById('goNext');

	var time = 0;//定时器图片跳转参数

	var index = 0;//index表示第几张图片在展示--->>第index张图片又 active这给类名 //也可以标傲世第几个点展示


	//2000s 跳转一次
	var times = 0;

	//清楚active的效果
	var clearActive = function () {
		//清除图片的active
		for (var i = 0; i < items.length; i++) {
			items[i].className = 'item';
		}
		//清除点的active
		for (var i = 0; i < points.length; i++) {
			points[i].className = 'point';
		}
	}

	//切换图片
	var goIndex = function () {
		clearActive();
		points[index].className = 'point active';
		items[index].className = 'item active';
	}

	var goNext = function () {
		if (index < 4) {
			index++;
		} else {
			index = 0;
		}
		goIndex();
	}

	var goPre = function () {
		if (index === 0) {
			index = 4;
		} else {
			index--;
		}
		goIndex();
	}
	//挂载下一页
	goNextBtn.addEventListener('click', function () {
		goNext();
		time = 0;
	});
	//挂载上一页
	goPreBtn.addEventListener('click', function () {
		goPre();
		time = 0;
	});

	//挂载点的事件
	for (var i = 0; i < points.length; i++) {
		points[i].addEventListener('click', function () {
			var pointIndex = this.getAttribute('data-index');
			index = pointIndex;
			goIndex();
			time = 0;//为了让图片停两秒 *****
		});
	}

	//画面z自动轮播
	for (var i = 0; i < items.length; i++) {
		//画面停留
		items[i].addEventListener("mouseover", function () {
			clearInterval(times);
		});
		//鼠标移开 继续轮播
		items[i].addEventListener("mouseout", function () {
			times = setInterval(function () {
				time++;
				if (time === 20) {
					goNext();
					time = 0;
				}
			}, 100);
		});
	}
</script>
</body>
</html>
有图片的轮播图
