滑动切换的轮播图

最新推荐文章于 2021-12-30 19:05:31 发布

口耳戈是个生僻字

最新推荐文章于 2021-12-30 19:05:31 发布

阅读量478

点赞数

分类专栏： javascript实例

本文链接：https://blog.csdn.net/qq_37199582/article/details/79439595

版权

javascript实例专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这是一个滑动切换的轮播图，如果想要循环播放，可以在代码中简单加几个语句就可以了

先来看看具体效果

<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>点击滑动图片</title>
		<style>
			#div1 {
				width: 280px;
				height: 180px;
				border: 1px solid #333;
				margin: 0 auto;
				position: relative;
				z-index: 1;
			}
			
			#div1 a {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				border: 1px solid #333;
				background: red;
				position: absolute;
				top: 74px;
				z-index: 5;
			}
			
			#div1 .prev {
				left: -60px;
			}
			
			#div1 .next {
				right: -60px;
			}
			
			#div1 img {
				position: absolute;
				top: 0;
				left: 0;
				transition: 1s;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
			}
			
			#text {
				width: 300px;
				height: 100px;
				border: 10px solid #999;
				background: #fff;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -60px 0 0 -160px;
				z-index: 3;
				text-align: center;
				display: none;
			}
			
			#bg {
				width: 100%;
				height: 100%;
				background: #000;
				opacity: 0.3;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				display: none;
			}
		</style>
	</head>

	<body>

		<div id="div1">
			<a href="javascript:;" class="prev"></a>
			<a href="javascript:;" class="next"></a>
			<img src="img/1.jpg" width="280" height="180" />
			<img src="img/2.jpg" width="280" height="180" />
			<img src="img/3.jpg" width="280" height="180" />
			<img src="img/4.jpg" width="280" height="180" />
		</div>

		<div id="text">
			<p>再来一次？</p>
			<input type="button" value="重来" />
		</div>
		<div id="bg"></div>

		<script>
			var oDiv = document.getElementById('div1');
			var aA = oDiv.getElementsByTagName('a');
			var aImg = oDiv.getElementsByTagName('img');

			var oBg = document.getElementById('bg');
			var oText = document.getElementById('text');
			var oBtn = oText.getElementsByTagName('input')[0];

			var sgin = 1;
			var iNow = 0;

			for(var i = 0; i < aImg.length; i++) {
				aImg[i].style.zIndex = aImg.length - i;
			}

			aA[0].onclick = function() {
				sgin = -1;
				doMove();
			};
			aA[1].onclick = function() {
				sgin = 1;
				doMove();
			};
			oBtn.onclick = function() {
				oBg.style.display = oText.style.display = 'none';
				for(var i = 0; i < aImg.length; i++) {
					aImg[i].style.left = 0;
					aImg[i].style.opacity = 1;
				}

				iNow = 0;
			};

			function doMove() {

				// document.title = iNow;
				if(iNow < aImg.length - 1) {
					aImg[iNow].style.left = sgin * 280 + 'px';
					aImg[iNow].style.opacity = 0;

					iNow++;
				} else {
					fnReset();
				}
			}

			function fnReset() {
				oBg.style.display = oText.style.display = 'block';
			}
		</script>

	</body>

</html>