原生代码之实现轮播图(左右翻页,定时翻页,指定翻页) - 蓝蓝设计_UI设计公司

帝皇彩票官网

原生代码之实现轮播图(左右翻页,定时翻页,指定翻页)

2020-3-15 前端达人 前端及开发文章及欣赏

首先在写代码之前我们需要理清如何穿插图片呢?

可以让所有图片都float:left,用一个大盒子装进所有图片,在用一个小盒子显示图片,溢出图片就hidden,之后以每张图片的宽度来scrollLeft.
可以给每张图片一个name/id,用循环遍历所有图片
可以用float:left,但是除了我要显示的图片外,其他图片都hidden,之后每当我需要某张图片时,我就把它制定到某位置

在这里,我将用第二种方法,因为它很直观明了,我要哪张图片我就调哪张图片。
HTML部分:在div里面我装了一张图片,name:0, 这是为了在刚打开的时候,我们的页面是有东西的而不是一片空白。其他部分都好理解,不理解的可在下方评论。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<link rel="stylesheet" href="轮播图.css" />
		<script src="轮播图.js">
		</script>
	</head>

	<body>
		<header>
			<div id="oImg">
				<!-- 轮流播放图片 -->
				<img id="insert" src="img/轮1.jpg" name="0"/>
			</div>
			<!-- 左右切换图片 -->
			<p id="left" οnclick="goBack()"></p>
			<p id="right" οnclick="goForward()"></p>

			<ul id="nav">
				<!-- 指定某张图片 -->
				<li id="1" οnclick="move(this)">1</li>
				<li id="2" οnclick="move(this)">2</li>
				<li id="3" οnclick="move(this)">3</li>
				<li id="4" οnclick="move(this)">4</li>
				<li id="5" οnclick="move(this)">5</li>
			</ul>
		</header>


	</body>

</html>

CSS:
* {
	margin: 0 auto;
	padding: 0 auto;
}

header {
	width: 100%;
	height: 680px;
	position: relative;

}

img {
	width: 100%;
	height: 680px; 
}   

#nav { 
	position: absolute;
	bottom: 5px;
	left: 30%;
}

#nav li {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #ccc;
	font-size: 24px;
	border-radius: 9px;
	color: darkslategrey;
	font-family: 'Times New Roman', Times, serif;
	margin: 0 25px;
	float: left;
	cursor: pointer;
	list-style: none;
}

#nav li:hover {
	background: peru;
}


#left {
	width: 25px;
	height: 24px;
	left: 0;
	top: 50%;
	cursor: pointer;
	position: absolute;
	background: url(img/fx1.png);
}

#right {
	width: 25px;
	height: 24px;
	right: 0;
	top: 50%;
	cursor: pointer;
	position: absolute;
	background: url(img/fx2.png);
}
之后我们来看重中之重JS部分
JavaScript:
// 五张图片的url
var oImg1 = "img/轮1.jpg";
var oImg2 = "img/轮2.jpg";
var oImg3 = "img/轮3.jpg";
var oImg4 = "img/轮4.jpg";
var oImg5 = "img/轮5.jpg";
// 把5张图片存入一个数组
var arr = [oImg1, oImg2, oImg3, oImg4, oImg5];

window.onload = function() {
	//刚加载时第一张图片1号背景颜色
	document.getElementById("1").style.background = "peru";  
	run()
	

}

//轮播
function run() { 
	timer = setInterval(function() {
		//随机点数字时能接着变化 
		var pic = document.getElementById("insert").name;
		var shade = document.getElementById("insert");  
		
		//如果为最后一张图片则重新循环
		if (pic == 4) {
			pic = -1;
		}

		//点一个数字该数字背景颜色变化其余的不变
		var aLi = document.getElementsByTagName("li");
		for (var j = 0; j < aLi.length; j++) {
			aLi[j].style.backgroundColor = "#CCCCCC";
		} 

		var i = parseInt(pic);   
		
		document.getElementById("insert").src = arr[i + 1]; 
		
		document.getElementById("insert").name = i + 1; 
		 
		//数字随图片变化
		switch (i) {
			case 0:
				var temp = '2';
				break;
			case 1:
				var temp = '3';
				break;
			case 2:
				var temp = '4';
				break;
			case 3:
				var temp = '5';
				break;
			case -1:
				var temp = '1';
				break;
		}
		document.getElementById(temp).style.background = "peru"   
		
	}, 5000)
}

//右箭头 
function goForward() {
	var temp = document.getElementById("insert").name;
	var oBox = document.getElementById("insert"); 
	var aLi = document.getElementsByTagName("li");
	// 数字跟着图片一起变
	for (var i = 0; i < aLi.length; i++) {
		aLi[i].style.backgroundColor = "#CCCCCC";
	}

	switch (temp) {
		case "0":
			var n = '2';
			break;
		case "1":
			var n = '3';
			break;
		case "2":
			var n = '4';
			break;
		case "3":
			var n = '5';
			break;
		case "4":
			var n = '1';
			break;
	}

	document.getElementById(n).style.background = "peru"
	// 向右移动图片
	for (var j = 0; j < arr.length; j++) {
		if (j < 4) {
			if (temp == j) {
				oBox.src = arr[j + 1]; 
			}
		} else {
			if (temp == 4) {
				oBox.src = arr[0]; 
			}
		}
	} 
	// 轮到最后一张图片时返回第一张
	if (temp < 4) {
		oBox.name = parseInt(temp) + 1;
	} else {
		oBox.name = 0;
	}
}

//左箭头
function goBack() {
	var temp = document.getElementById("insert").name;
	var oBox = document.getElementById("insert")
	var aLi = document.getElementsByTagName("li");
	// 图片移动时数字也跟着变
	for (var i = 0; i < aLi.length; i++) {
		aLi[i].style.backgroundColor = "#CCCCCC";
	}

	switch (temp) {
		case "0":
			var n = '5';
			break;
		case "1":
			var n = '1';
			break;
		case "2":
			var n = '2';
			break;
		case "3":
			var n = '3';
			break;
		case "4":
			var n = '4';
			break;
	}

	document.getElementById(n).style.background = "peru"
	// 向左移动图片 

	for (var j = 0; j < arr.length; j++) {
		if (j > 0) {
			if (temp == j) {
				oBox.src = arr[j - 1];
			}
		} else {
			if (temp == 0) {
				oBox.src = arr[4];
			}
		}
	}
	// 轮到第一张图片时返回最后一张
	if (temp > 0) {
		oBox.name = parseInt(temp) - 1;
	} else {
		oBox.name = 4;
	}
}

//指定图片
function move(num) { 
	var oBox = document.getElementById("insert");
	var temp = document.getElementById("insert").name;
	var aLi = document.getElementsByTagName("li");
	for (var i = 0; i < aLi.length; i++) {
		aLi[i].style.backgroundColor = "#CCCCCC";
	}

	document.getElementById(num.innerHTML).style.background = "peru"

	switch (num.innerHTML) {
		case "1":
			oBox.src = arr[0];
			oBox.name = 0;
			break;
		case "2":
			oBox.src = arr[1];
			oBox.name = 1;
			break;
		case "3":
			oBox.src = arr[2];
			oBox.name = 2;
			break;
		case "4":
			oBox.src = arr[3];
			oBox.name = 3;
			break;
		case "5":
			oBox.src = arr[4];
			oBox.name = 4;
			break;
	}
}
JavaScript部分我写的很详细,仔细看的话是可以看懂的,主要分3个重要部分:

用src来调用每张图片并给每张图片一个name,这样方便后面的重复使用
为下方的数字按钮匹配图片,点击1跳到第1张图片,点击2跳到第2张图片…因为我把所有的图片都存在了一个数组里,所以在匹配的时候要注意数组0位置才是数字1指定的图片
可以来回翻页,当到达最后一张图片时,我再点击下一张图片又能返回到第一张图片了,亦或者当我点击到第一张图片时,再上一张图片又回到第五张图片了
效果如下:

点击查看原图

点击查看原图

大家有问题可以在下方评论哦,看到了会及时回复哒!


————————————————
版权声明:本文为CSDN博主「weixin_43964414」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43964414/article/details/104844041

标签: CSS js

Powered by sitemap
大象彩票计划 博发彩票APP下载 吉林快3代理 大象彩票APP 任我赢机器人 广西快3走势 山东11选5走势 K8彩票投注 迪士尼彩乐园app pk10怎么玩