JavaScript实现简易轮播图

- 日理万妓 2022-04-10 08:28 311阅读 0赞

# JavaScript实现简易轮播图 #

--------------------

**Html代码块：**

<div class="container">
    	<div class="box">
    	
    		<img src="img/1.jpg">
    		<img src="img/2.jpg">
    		<img src="img/3.jpg">
    		<img src="img/4.jpg">
    		<img src="img/5.jpg">
    		<img src="img/1.jpg">
    	</div>
    	
    	<div class="intor">
    		<ul>
    			<li class="active"></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ul>
    	</div>
    </div>

**CSS代码：**

* { 
    	margin: 0;
    	padding: 0;
    }
    
    			.container { 
    				overflow-x: hidden;
    			}
    
    			.box { 
    				height: 260px;
    				display: flex;
    				left: 0;
    				position: relative;
    			}
    
    			.box img { 
    				flex: 1;
    			}
    			.intor ul { 
    				list-style: none;
    				display: flex;
    				position: absolute;
    				height: 12px;
    				bottom: 5px;
    				left: 50%;
    			}
    
    			.intor ul li { 
    				flex: 1;
    				border-radius: 6px;
    				border: 1px solid #ccc;
    				margin-right: 5px;
    			}
    
    			.active { 
    				background: white;
    			}

**我这里使用的是弹性布局，更简洁的将图片排列，不会像float和inline-block一些问题。**

**JS代码：**

<script type="text/javascript">
    			var imgList = document.getElementsByTagName("img"); //获取所有图片NodeList一个集合
    			var imgLength = imgList.length; //拿到集合的长度大小
    			var ul = document.querySelector("ul");
    			var li = ul.getElementsByTagName("li"); //获得li长度
    			var container = document.querySelector(".container");
    			var box = document.querySelector(".box");
    			var liLength = li.length; //动态获取li长度
    			var width = 360; //定义一个宽度,原本想直接获取但是发现弹性布局默认会让宽度为浏览器宽度
    			var timer; //设置一个全局变量的计时器
    			var index = 1; //索引
    			container.style.width = width + 'px'; //设置容器的宽度
    			box.style.width = width * imgLength + 'px'; //动态设置盒子的宽度
    			ul.style.width = (ul.offsetHeight + 5) * liLength + "px"; //动态设置ul宽度
    			ul.style.marginLeft = -ul.offsetWidth / 2 + "px"; //动态设置ul边缘值
    			function startImg() { 
    				timer = setInterval(function() { 
    						box.style.left = box.offsetLeft - width + "px";
    						box.style.transition = ".4s";
    						if (index == imgLength - 1) { 
    							//当index==imgLength时候这一遍代码都会执行,所以这里单独设置当index==5时候,setTimeOut等待动画结束后触发,从而衔接.
    							setTimeout(function() { 
    								box.style.left = "0px";
    								box.style.transition = "0s";
    								
    							}, 400);
    							li[index - 1].className = "";
    							index = 1;
    							li[index - 1].className = "active";
    						} else { 
    							li[index].className = "active";
    							li[index - 1].className = "";
    							index++;
    						}
    				}, 3000);
    			}
    
    			function ScrollBox(i) { 
    				box.style.left = -i * width + "px";
    				box.style.transition = ".4s";
    				li[index - 1].className = "";
    				li[i].className = "active";
    				index = i + 1;
    			}
    			for (let i = 0; i < li.length; i++) { 
    				li[i].onclick = function() { 
    					ScrollBox(i);
    				}
    			}
    			//为容器设置鼠标移动事件
    			container.addEventListener("mousemove", function() { 
    				if (timer) { 
    					clearInterval(timer);
    				}
    			})
    			//为容器设置鼠标移出事件
    			container.addEventListener("mouseleave", function() { 
    				startImg();
    			})
    			//默认开始执行函数
    			startImg();
    		</script>

**在宽度动态获取这里做的不够好，如果有小伙伴给我提个意见可好。谢谢大家欣赏！**

发表评论取消回复

表情：

评论列表（有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读

相关实现简易轮播图效果

所用知识点：定时器 setInterval(function()\{ count(); \},1000) 每隔1000ms执行一次co

亦凉/ 2022年12月13日 04:54/ 0 赞/ 165 阅读

相关简单html实现图片轮播,JavaScript实现简易轮播图

JavaScript实现简易轮播图 Html代码块： ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp

小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 269 阅读

相关 javascript实现轮播图

1.首先是最简单的图片切换效果。实现方法：将所有的图片放入一个数组中，几秒后切换为下一张。如果到了最后一张，切换为第一张显示。 <!DOCTYPE html P

缺乏、安全感/ 2022年07月27日 15:54/ 0 赞/ 153 阅读

相关使用JavaScript实现轮播图

> 经常能看到各种各样的图片轮播，下面就从简单到复杂一步步完成一个图片轮播效果效果1 > 这一步需要实现的结果如下图所示 > > ![SouthEast][]

﹏ヽ暗。殇╰゛Y/ 2022年06月01日 02:48/ 0 赞/ 208 阅读

相关 javascript实现轮播图效果

实现效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

r囧r小猫/ 2022年04月14日 06:26/ 0 赞/ 314 阅读

相关 JavaScript实现简易轮播图

JavaScript实现简易轮播图 -------------------- Html代码块： <div class="container"> <d

- 日理万妓/ 2022年04月10日 08:28/ 0 赞/ 312 阅读

相关 JavaScript实现轮播图

Html代码 <body> <div class="header" id="header">

分手后的思念是犯贱/ 2022年02月03日 19:49/ 0 赞/ 255 阅读

相关使用JavaScript实现轮播图

使用JavaScript实现轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta c

悠悠/ 2022年02月03日 15:57/ 0 赞/ 220 阅读

相关用js实现简易轮播图

> 之前一直觉得自己技术菜学的东西基础没必要写技术性博客，但我发现我错了。博客是用来记录最近所学和遇到的坑又是怎么样填的坑的一种总结，当然也有可能有很多小白和我

r囧r小猫/ 2021年12月05日 13:25/ 0 赞/ 275 阅读

相关简易轮播的实现

jquery实现ppt轮播 html代码 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

深藏阁楼爱情的钟/ 2021年12月03日 15:51/ 0 赞/ 234 阅读