JS轮播图

最新推荐文章于 2024-09-09 09:35:48 发布

mister勾

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量79

点赞数

分类专栏： js 文章标签： javascript js

本文链接：https://blog.csdn.net/u013234941/article/details/116036546

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
			}

			#box {
				width: 600px;
				height: 400px;
				border: 3px solid #43CACA;
				margin: 50px auto;
				position: relative;
				overflow: hidden;
			}

			#box1 {
				width: 3600px;
				font-size: 0px;
				position: relative;
				left: 0px;
			}

			img {
				width: 600px;
				height: 400px;
				display: inline-block;
			}

			#box2 {
				width: 169px;
				/* border: #43CACA 1px solid; */
				position: absolute;
				left: 231px;
				top: 367px;
				text-align: center;
			}

			.point {
				width: 20px;
				height: 20px;
				background-color: #43CACA;
				border-radius: 10px;
				display: inline-block;

			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box1">
				<img src="./img/1.JPG">
				<img src="./img/2.JPG">
				<img src="./img/3.JPG">
				<img src="./img/4.JPG">
				<img src="./img/5.JPG">
			</div>
			<div id="box2">
				<div onclick="move(0)" class="point"></div>
				<div onclick="move(1)" class="point"></div>
				<div onclick="move(2)" class="point"></div>
				<div onclick="move(3)" class="point"></div>
				<div onclick="move(4)" class="point"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var box1 = document.getElementById("box1");
		var curx = 0; //定义图片便宜量
		var si; //定义计时器变量，变量这里定义的目的是为，如果说上一次的点击事件还没有执行完，点击了新的事件之后就可以清除掉，如果说定义到函数的内部的话，不能做到每次点击的时候清除计时器
		var pointList = document.getElementsByClassName("point");//获得所有的按钮
		pointList[0].style.backgroundColor = "whitesmoke";//默认将第一个按钮设置为白色
		//定义按钮点击执行的事件函数
		function move(index) {
			
			//循环判断按钮，将非点击时间中的还原为默认颜色
			for (var i = 0; i < pointList.length; i++) {
				if (i == index) {
					pointList[index].style.backgroundColor = "whitesmoke";

				}else{
					pointList[i].style.backgroundColor = "#43CACA";
				}
			}

			//只要点击了新得按钮，就将上一次得按钮给终结掉
			clearInterval(si);
			console.log(si);
			si = setInterval(function() {
				//给图片向左的判断,每次减5直到向左等于目标的就不在进行判断
				if (curx > -index * 600) {
					curx -= 5;
					box1.style.left = curx + "px";
				}
				//给图片向右的判断，每次加5直到向左等于目标的就不在进行判断
				if (curx < -index * 600) {
					curx += 5;
					box1.style.left = curx + "px";
				}
				//当达到目标位置时，清除即计时器，这里从页面角度来说写也不影响，但是实际上程序还在一直进行，所以需要清除计时器
				if (curx == -index * 600) {
					clearInterval(si);
				}
			}, 1)
		}


		var autoNum = 1; //默认显示的是第一张图片，所以在执行move()时，只需从第二张图片开始，给下标参数1即为第2张图片
		setInterval(function() {
			//当自增5时，将参数改为0，又从第一张开始，但这里有个问题，从最后一张到第一张图片需要的时间为（3000/5）/1 = 600毫秒  当时自动轮播的时间为3000毫秒，那么第一张图片的停留时间实际只有3000-600，其他图片的停留时间为3000-600/5
			if (autoNum == 5) {
				autoNum = 0;
			}
			move(autoNum++);

		}, 3000)
	</script>
</html>

mister勾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS轮播图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0px; } #box { width: 600px; height: 400px; border: 3px solid #43CACA; ma
复制链接

扫一扫

专栏目录