天天看點
傳回

js實作簡易輪播圖

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>輪播圖左右</title>
		<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#bannerBox {
				width: 520px;
				height: 320px;
				margin: 50px auto;
				background: greenyellow;
				padding: 10px 0;
				position: relative;
				overflow: hidden;
			}
			
			#imglist {
				height: 320px;
				position: absolute;
			}
			
			#imglist img {
				width: 500px;
				height: 320px;
			}
			
			#imglist li {
				width: 500px;
				height: 320px;
				float: left;
				margin: 0 10px;
				list-style: none;
			}
			
			#btns span {
				position: absolute;
				top: 50%;
				margin-top: -25px;
				width: 50px;
				height: 50px;
				background: #000000;
				opacity: .3;
				font-size: 40px;
				text-align: center;
				line-height: 50px;
				cursor: pointer;
				color: #fff;
			}
			
			#btns .prev {
				left: 20px;
			}
			
			#btns .next {
				right: 20px;
			}
			
			#navbtn {
				position: absolute;
				bottom: 20px;
			}
			
			#navbtn a {
				width: 10px;
				height: 10px;
				background: #f00;
				float: left;
				margin: 0 5px;
				filter: alpha(opacity=60);
				opacity: .6;
				border-radius: 50%;
			}
			
		
			#navbtn a:hover,#navbtn a.hover{
				background: #000;
			}
		</style>
	</head>

	<body>
		<div id="bannerBox">
			<ul id="imglist">
				<li><img src="img/01.jpg" /></li>
				<li><img src="img/02.jpg" /></li>
				<li><img src="img/03.jpg" /></li>
				<li><img src="img/04.jpg" /></li>
				<li><img src="img/01.jpg" /></li>
			</ul>
			<div id="btns">
				<span class="prev">&lt;</span>
				<span class="next">&gt;</span>
			</div>
			<div id="navbtn">
				<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ></a>
				<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ></a>
				<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ></a>
				<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ></a>
			</div>
		</div>

		<script type="text/javascript">
			var oBannerBox = document.getElementById("bannerBox");
			var oImglist = document.getElementById("imglist");
			var aList = oImglist.children;
			var oImg = document.getElementsByTagName("img");

			var oBtns = document.getElementById("btns");
			var oPrev = oBtns.children[0];
			var oNext = oBtns.children[1];

			var oNavbtn = document.getElementById("navbtn");
			var aAll = oNavbtn.children;
			aAll[0].className = "hover";
			oNavbtn.style.left = (oBannerBox.offsetWidth - oNavbtn.offsetWidth) / 2 + "px";

			oImglist.style.width = 520 * oImg.length + "px";

			var i = 0;
			var timer = setInterval(function() {
				startMove();
			}, 3000);

			function startMove() {
				i++;
				//123123
				if(i == aList.length) {
					oImglist.style.left = 0;
					i = 0;
				}
				//321321
				if(i == -1) {
					oImglist.style.left = -520 * (aList.length - 1) + "px";
					i = aList.length - 2;
				}
				for(var j = 0; j < aAll.length; j++) {
						aAll[j].className= "";
					}
					if(i==aAll.length){
						aAll[0].className= "hover";
					}else{
						aAll[i].className="hover";
						console.log(i)
					}
				move(oImglist, {
					"left": -520 * i
				});
			}
			//滑鼠移入輪播區域 清除定時器
			oBannerBox.onmouseover = function() {
				clearInterval(timer);
			}
			//移出開啟
			oBannerBox.onmouseout = function() {
				timer = setInterval(function() {
					startMove();
				}, 3000);
			}
			//點選按鈕
			oNext.onclick = function() {
				startMove();
			}
			oPrev.onclick = function() {
				i -= 2;
				startMove();
			}

			for(let j=0;j<aAll.length;j++){
				aAll[j].onmouseover=function(){
					i=j-1;
					startMove();
				}
			}
			
					
				
		
		</script>
	</body>

</html>
js簡單案例 輪播圖
上一篇: [ES6] 輪播圖---面向對象版本
下一篇: jsES6實作輪播

繼續閱讀