如何使用纯CSS、JS实现图片轮播效果-css教程-PHP中文网

首页

web前端

css教程

如何使用纯CSS、JS实现图片轮播效果

醉折花枝作酒筹

Apr 23, 2021 am 09:06 AM

cssjs

本篇文章给大家详细介绍一下使用纯CSS、JS实现图片轮播效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

如何使用纯CSS、JS实现图片轮播效果

<!DOCTYPE html><html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--轮播-->
		<style>
			.carousel {
				width: 648px;
				height: 400px;
				margin: 0 auto;
				text-align: center;
				position: absolute;
				left: 24%;
				/*border: 1px solid red;*/
			}
			
			.inner {
				/*border: 12px solid blue;*/
				width: 648px;
				height: 400px;
				position: absolute;
			}
			
			.inner-img {
				width: 200px;
				height: 500px;
				display: none;
				/*position: absolute;*/
				position: relative;
				/*top:0;*/
				/*left:0;*/
				/*z-index:1000;*/
			}
			
			.inner-img.active {
				display: block;
			}
			
			.leftBtn,
			.rightBtn {
				position: absolute;
				width: 40px;
				height: 60px;
				background: rgba(0, 0, 0, 0.3);
				/*近乎透明色*/
				font-size: 30px;
				color: #fff;
				text-align: center;
				line-height: 60px;
				cursor: pointer;
				display: none;
			}
			
			.leftBtn {
				left: 5px;
				top: 170px;
			}
			
			.rightBtn {
				/*right:5px;*/
				left: 603px;
				top: 170px;
			}
			
			.carousel ul {
				position: absolute;
				/*left:20px;*/
				padding-left: 228px;
				bottom: 10px;
				/*z-index: 999;*/
				list-style: none;
				width: 200px;
				height: 20px;
			}
			
			.carousel ul .page {
				float: left;
				width: 18px;
				height: 18px;
				line-height: 18px;
				border-radius: 18px;
				/*变成圆形*/
				background: black;
				margin-right: 6px;
				/*距离6个px单位*/
				color: #fff;
				font-size: 14px;
				/*text-align: center;*/
				cursor: pointer;
			}
			
			.carousel ul .page.active {
				background-color: red;
			}
			
			.carousel p {
				/*float: left;*/
				margin-top: -360px;
				margin-right: -600%;
				color: black;
				text-decoration: none;
				list-style: none;
			}
		</style>

	</head>

	<body>
		<!--轮播-->
		<p class="carousel">
			<p class="inner">
				<a href="#" class="inner-img active"><img src="https://s2.ax1x.com/2019/11/06/MCxe0O.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxl9A.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxJnf.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxtHS.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxaNQ.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCx6BT.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxW4J.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCx43R.jpg" alt="图片加载中" width="648" height="400"></a>

					<p class="leftBtn">&lt;</p>
					<!--左按钮-->
					<p class="rightBtn">&gt;</p>
					<!--右按钮-->
			</p>
			<ul>
				<li class="page active">1</li>
				<li class="page">2</li>
				<li class="page">3</li>
				<li class="page">4</li>
				<li class="page">5</li>
				<li class="page">6</li>
				<li class="page">7</li>
				<li class="page">8</li>
			</ul>
		</p>

	</body>

	<script>
		var carousel = document.getElementsByClassName(&#39;carousel&#39;)[0], //获取carousel的class类
			// 获取所有包含图片的链接
			innerImg = document.getElementsByClassName(&#39;inner-img&#39;),
			// 获取左右按钮
			btnL = document.getElementsByClassName(&#39;leftBtn&#39;)[0],
			btnR = document.getElementsByClassName(&#39;rightBtn&#39;)[0],
			// 获取分页器
			page = document.getElementsByClassName(&#39;page&#39;),
			num = 0; // 声明变量 初始图片为第一张0
		// 声明时间控制函数
		var timer = setInterval(moveR, 2500); //调用moveR 时间间隔2.5s 
		// 图片向右轮播
		function moveR() {
			num++; // 变量每3000毫秒递增一次,图片向右轮播
			// 如果是最后一张图片的时候从0开始显示
			if(num == innerImg.length) {
				num = 0;
			}
			move();
		};
		// 图片向左轮播
		function moveL() {
			num--; // 每调用一次moveL(),变量递减一次
			// 如果是第一张图片，则从最后一张图片开始显示
			if(num == -1) {
				num = innerImg.length - 1;
			};
			move();
		}　　　　 // 图片切换
		　　		function move() {　　　　 // 把所有的innerImg隐藏和page背景全部变成黑色
			for(var i = 0; i < innerImg.length; i++) {
				innerImg[i].style.display = &#39;none&#39;;
				page[i].style.background = &#39;black&#39;;
			}
			// 把当前num下标的innerImg显示和page背景变成red
			innerImg[num].style.display = &#39;block&#39;;
			page[num].style.background = &#39;red&#39;;　　		}

		// 分页器鼠标滑过时图片切换
		for(var i = 0; i < page.length; i++) {
			// 用来保存下标，page[i].index == 0 / 1 / 2 / 3 /4...
			page[i].index = i;
			// console.log(page[i].index);
			// 因为已经保存好的下边，这里的page[i], page[0], page[1], page[2], page[3]
			page[i].onmouseover = function() {
				for(var j = 0; j < page.length; j++) {
					page[j].style.background = &#39;black&#39;;
					innerImg[j].style.display = &#39;none&#39;;
				}
				this.style.background = &#39;red&#39;;　　　　　　　 // console.log(this.index);可以查看是多少
				innerImg[this.index].style.display = &#39;block&#39;;
				num = this.index;
			}
		}
		btnL.onclick = function() {
			moveL();
		}
		btnR.onclick = function() {
			moveR();
		}

		// 鼠标划上carousel时让左右按钮显示 并清除时间函数 
		carousel.onmouseover = function() {
			// 清除时间函数
			clearInterval(timer); //暂停 图片不继续循环
			btnR.style.display = &#39;block&#39;;
			btnL.style.display = &#39;block&#39;;
		}

		// 鼠标离开carousel时让左右按钮隐藏
		carousel.onmouseout = function() {
			// 开启时间函数
			timer = setInterval(moveR, 2500);
			btnR.style.display = &#39;none&#39;;
			btnL.style.display = &#39;none&#39;;
		}
	</script></html>

推荐学习：css视频教程

以上是如何使用纯CSS、JS实现图片轮播效果的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：CSDN。如有侵权，请联系admin@php.cn删除