轮播图（JavaScript定时器）

最新推荐文章于 2023-05-18 20:23:20 发布

牛哄哄的柯南

最新推荐文章于 2023-05-18 20:23:20 发布

阅读量3.8k

点赞数 17

分类专栏： JavaScript 文章标签： javascript html 前端轮播图

本文链接：https://blog.csdn.net/weixin_43883917/article/details/109682927

版权

JavaScript 专栏收录该内容

15 篇文章 8 订阅

订阅专栏

我们在很多网站经常看到的轮播图,基本都有如下功能：

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

牛哄哄的柯南

关注

17
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
17
评论
轮播图（JavaScript定时器）

我们在很多网站经常看到的轮播图,基本都有如下功能：1.图片间隔一定时间自动切换。2.可以点击下面的图片序号手动切换。3.鼠标停留在图片上时停止轮播。先上效果图：自动轮播功能：手动切换功能：悬停停止功能：完整代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0;
复制链接

扫一扫