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

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

		
		
			.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;
			}
		

	

	
		
		

			

				
					
					
					
					
					
					
					

					
<
					
					
>
					
			

			

				
1
				
2
				
3
				
4
				
5
				
6
				
7
				
8
			
		


	

	
		var carousel = document.getElementsByClassName('carousel')[0], //获取carousel的class类
			// 获取所有包含图片的链接
			innerImg = document.getElementsByClassName('inner-img'),
			// 获取左右按钮
			btnL = document.getElementsByClassName('leftBtn')[0],
			btnR = document.getElementsByClassName('rightBtn')[0],
			// 获取分页器
			page = document.getElementsByClassName('page'),
			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 = 'none';
				page[i].style.background = 'black';
			}
			// 把当前num下标的innerImg显示和page背景变成red
			innerImg[num].style.display = 'block';
			page[num].style.background = 'red';　　		}

		// 分页器鼠标滑过时图片切换
		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 = 'black';
					innerImg[j].style.display = 'none';
				}
				this.style.background = 'red';　　　　　　　 // console.log(this.index);可以查看是多少
				innerImg[this.index].style.display = 'block';
				num = this.index;
			}
		}
		btnL.onclick = function() {
			moveL();
		}
		btnR.onclick = function() {
			moveR();
		}

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

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