輪播圖（JavaScript定時器）

牛哄哄的柯南發表於2020-11-13
JavaScript定時器

我們在很多網站經常看到的輪播圖,基本都有如下功能：

1.圖片間隔一定時間自動切換。
2.可以點選下面的圖片序號手動切換。
3.滑鼠停留在圖片上時停止輪播。

先上效果圖：
自動輪播功能：
在這裡插入圖片描述
手動切換功能：
在這裡插入圖片描述
懸停停止功能：
在這裡插入圖片描述
完整程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.com {
				width: 750px;
				height: 340px;
				margin:0 auto;
				border: solid 2px red;
				overflow: hidden;
				position: relative;
			}

			.com ul{
				position: absolute;
			}
			.com ul li{
				/* height: 340px; */
			}
			.com ul li img{
				width: 750px; 
				height: 340px;
			}
			.com ol{
				position: absolute;
				right: 5px;
				bottom: 5px;
			}
			.com ol li{
				width: 20px;
				height: 20px;
				background-color: lightgray;
				display: inline-block;
				border-radius: 50%;
				text-align: center;
				line-height: 20px;
				margin-left:5px;
				float: left;
			}
			.com ol .on{
				background-color: red;
				color:#fff;
			}
		</style>
		<script type="text/javascript">
			window.onload= function(){
				var com = document.getElementById('com');
				var pic = document.getElementById('pic').getElementsByTagName('li');
				var li = document.getElementById('num').getElementsByTagName('li');
				var index=0;
				var timer=null;
				
				timer = setInterval(autoPlay,1500);
				
				com.onmouseover = function() {
					clearInterval(timer);
				}
				
				com.onmouseout = function() {
					timer = setInterval(autoPlay, 1500);
				}
				
				for(var i=0;i<li.length;i++){
					li[i].onmousemove=function(){
						clearInterval(timer);
						index=this.innerText-1;
						changePic(index);
					}
				}
				
				function autoPlay(){
					if(++index>=pic.length){
						index=0;
					}
					changePic(index);
				}
				function changePic(liIndex){
					for(var i=0;i<li.length;i++){
						pic[i].style.display="none";
						li[i].className="";
					}
					pic[liIndex].style.display="block";
					li[liIndex].className="on";
				}
				
				
			}
		</script>
		<title></title>
	</head>
	<body>
		<div class="com" id="com">
			<ul id="pic">
				<!-- <li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li> -->
				<li><img src="https://img1.youlu.net/pic/flash/202008271438183818.jpg" alt=""/></li>
				<li><img src="https://img1.youlu.net/pic/flash/202003130926142614.jpg" alt=""/></li>
				<li><img src="https://img1.youlu.net/pic/flash/202006211555305530.jpg" alt=""/></li>
				<li><img src="https://img1.youlu.net/pic/flash/201810161023452345.jpg" alt=""/></li>
			</ul>
			<ol id="num">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>


		</div>
	</body>
</html>

注：圖片採用的為有路網宣傳圖片連結，僅供演示，無其它任何用途，侵權聯絡刪除。

寫作不易，讀完如果對你有幫助，感謝點贊支援！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]
在這裡插入圖片描述

加油！

共同努力！

Keafmd

相關文章