如何用javascript实现轮播图效果

最新推荐文章于 2024-06-17 15:29:34 发布

winneryy

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量148

点赞数

分类专栏： web前端文章标签： js

本文链接：https://blog.csdn.net/winneryy/article/details/113248837

版权

web前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
			}

			.container {
				position: relative;
				width: 721px;
				height: 455px;
				margin: 100px auto 0 auto;
				box-shadow: 0 0 5px green;
				overflow: hidden;
			}

			.wrap {
				position: absolute;
				width: 4326px;
				height: 455px;
				z-index: 1;
			}

			.container .wrap img {
				float: left;
				width: 721px;
				height: 455px;
			}

			.container .buttons {
				position: absolute;
				right: 150px;
				bottom: 20px;
				width: 120px;
				height: 10px;
				z-index: 2;
			}

			.container .buttons span {
				margin-left: 5px;
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: powderblue;
				text-align: center;
				color: white;
				cursor: pointer;
			}

			.container .buttons span.on {
				background-color: red;
			}

			.container .arrow {
				position: absolute;
				top: 35%;
				color: green;
				padding: 0px 14px;
				border-radius: 50%;
				font-size: 50px;
				z-index: 2;
				display: none;
			}

			.container .arrow_left {
				left: 10px;
			}

			.container .arrow_right {
				right: 10px;
			}

			.container:hover .arrow {
				display: block;
			}

			.container .arrow:hover {
				background-color: rgba(0, 0, 0, 0.2);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="wrap" style="left:-721px;">
				 <img src="../img/img_6/focus3.jpg" alt="">
	            <img src="../img/img_6/focus.jpg" alt="">
	            <img src="../img/img_6/focus1.jpg" alt="">
	            <img src="../img/img_6/focus2.jpg" alt="">
	            <img src="../img/img_6/focus3.jpg" alt="">
	            <img src="../img/img_6/focus.jpg" alt="">
			</div>
			<div class="buttons">
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
			</div>
			<a href="javascript:;" class="arrow arrow_left">&lt;</a>
			<a href="javascript:;" class="arrow arrow_right">&gt;</a>
		</div>
		<script>
			//1。点击下一张图片实现切换
			var wrap = document.querySelector(".wrap");
			var next = document.querySelector(".arrow_right");
			var prev = document.querySelector(".arrow_left");
			next.onclick = function() {
				next_pic();
			}
			prev.onclick = function() {
				prev_pic();
			}

			function next_pic() {
				var newLeft = parseInt(wrap.style.left) - 721;
				wrap.style.left = newLeft + "px";
			}

			function prev_pic() {
				var newLeft = parseInt(wrap.style.left) + 721;
				wrap.style.left = newLeft + "px";
			}

			function next_pic() {
				var newLeft;
				if (wrap.style.left === "-3605px") {
					newLeft = -1442;
				} else {
					newLeft = parseInt(wrap.style.left) - 721;
				}
				wrap.style.left = newLeft + "px";
				index++;
				if (index > 3) {
					index = 0;
				}
				showCurrentDot();
			}

			function prev_pic() {
				var newLeft;
				if (wrap.style.left === "0px") {
					newLeft = -2884;
				} else {
					newLeft = parseInt(wrap.style.left) + 721;
				}
				wrap.style.left = newLeft + "px";
				index--;
				if (index < 0) {
					index = 3;
				}
				showCurrentDot();
			}
			var timer = null;

			function autoPlay() {
				timer = setInterval(function() {
					next_pic();
				}, 1000);
			}
			autoPlay();
			var container = document.querySelector(".container");
			container.onmouseenter = function() {
				clearInterval(timer);
			}
			container.onmouseleave = function() {
				autoPlay();
			}
			var index = 0;
			var dots = document.getElementsByTagName("span");

			function showCurrentDot() {
				for (var i = 0, len = dots.length; i < len; i++) {
					dots[i].className = "";
				}
				dots[index].className = "on";
			}
			showCurrentDot();
			for (var i = 0, len = dots.length; i < len; i++) {
				(function(i) {
					dots[i].onclick = function() {
						var dis = index - i;
						if (index == 3 && parseInt(wrap.style.left) !== -3605) {
							dis = dis - 4;
						}
						if (index == 0 && parseInt(wrap.style.left) !== -721) {
							dis = 4 + dis;
						}
						wrap.style.left = (parseInt(wrap.style.left) + dis * 721) + "px";
						index = i;
						showCurrentDot();
					}
				})(i);
			}
		</script>
	</body>
</html>

网页轮播图

winneryy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何用javascript实现轮播图效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; } .container { position: relative; w.
复制链接

扫一扫

专栏目录