JavaScript经典案例：图片流动轮播

旧城等待， 2022-12-24 11:00 137阅读 0赞

效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70]

CSS代码：

<style type="text/css">
    	/* 去除元素的默认样式 */
    	* {
    		margin: 0;
    		padding: 0;
    	}
    
    	/* 图片容器样式 */
    	#outer {
    		position: relative;
    		/* 图片宽400，高400 */
    		width: 420px;
    		height: 400px;
    		margin: 50px auto;
    		padding: 10px 0;
    		overflow: hidden;
    		background-color: #90EE90;
    	}
    
    	/* 图片列表样式 */
    	#imgList {
    		position: absolute;
    		/* left: -420px; */
    		/* 采用JavaScript设置动态宽度 */
    		/* width: 2600px; */
    		list-style: none;
    	}
    
    	#imgList li {
    		float: left;
    		margin: 0 10px;
    	}
    
    	/* 图片导航点 */
    	#navdot {
    		position: absolute;
    		/* 采用JavaScript设置动态居中 */
    		/* left: 147.5px; */
    		bottom: 30px;
    	}
    
    	#navdot a {
    		float: left;
    		width: 10px;
    		height: 10px;
    		margin: 0 5px;
    		opacity: 0.5;
    		filter: alpha(opacity=50);
    		/* 兼容IE */
    		background-color: red;
    	}
    </style>

HTML代码：

<div id="outer">
    	<ul id="imgList">
    		<li><img src="../imgCouple/1.jpg"></li>
    		<li><img src="../imgCouple/2.jpg"></li>
    		<li><img src="../imgCouple/3.jpg"></li>
    		<li><img src="../imgCouple/4.jpg"></li>
    		<li><img src="../imgCouple/5.jpg"></li>
    		<li><img src="../imgCouple/6.jpg"></li>
    		<li><img src="../imgCouple/1.jpg"></li>
    	</ul>
    	<div id="navdot">
    		<a href="javascript:void(0);"></a>
    		<a href="javascript:void(0);"></a>
    		<a href="javascript:void(0);"></a>
    		<a href="javascript:void(0);"></a>
    		<a href="javascript:void(0);"></a>
    		<a href="javascript:void(0);"></a>
    	</div>
    </div>

JavaScript代码：

<script type="text/javascript">
    	window.onload = function() {
    		var imgList = document.getElementById("imgList"); // 获取图片列表
    		var imgArr = document.getElementsByTagName("img"); // 获取所有图片
    		imgList.style.width = 420 * imgArr.length + "px"; // 动态调整图片列表的宽度
    
    		var outer = document.getElementById("outer"); // 获取图片容器
    		var navdot = document.getElementById("navdot"); // 获取导航点容器
    		// 轮播图导航点动态居中
    		navdot.style.left = (outer.offsetWidth - navdot.offsetWidth) / 2 + "px";
    
    		var index = 0; // 轮播图序号
    		var href = document.getElementsByTagName("a"); // 获取导航点超链接
    		href[index].style.backgroundColor = "black"; // 改变当前轮播图对应轮播点的颜色
    		for (var i = 0; i < href.length; i++) {
    			href[i].sub = i; // 为所有的导航点添加下标
    			href[i].onclick = function() {
    				clearInterval(autoTimer); // 消除图片自动轮播和元素动态移动间的动画冲突
    				index = this.sub; // 将图片下标的值赋值给轮播下标
    				// imgList.style.left = index * (-420) + "px"; // 每次偏移一张图片的宽度
    				backHref(); // 调用导航点轮播样式函数
    				// 调用元素动态移动函数
    				bySwitching(imgList, "left", index * -420, 25, function() {
    					autoSwitching(); // 调用图片自动轮播函数
    				});
    			}
    		}
    
    		// 图片自动轮播
    		var autoTimer; // 自动轮播计时器标识
    		function autoSwitching() {
    			autoTimer = setInterval(function() {
    				index++; // 图片下标自增
    				index = index % imgArr.length; // 获取图片下标的值
    				// 调用图片自动轮播函数
    				bySwitching(imgList, "left", index * -420, 25, function() {
    					backHref(); // 重新调用导航点轮播样式函数
    				});
    			}, 2500);
    		};
    		autoSwitching(); // 调用图片自动轮播函数
    
    		// 导航点轮播样式
    		function backHref() {
    			// 图片轮播到最后一张时重新回到第一张
    			if (index >= imgArr.length - 1) {
    				index = 0;
    				imgList.style.left = 0; // 通过CSS将最后一张图片切换成第一张
    			}
    			for (var i = 0; i < href.length; i++) {
    				// 此处若为导航点设置了悬浮样式宜将颜色更改为空字符串""
    				href[i].style.backgroundColor = "red";
    			}
    			// 仅被点击的导航点更改背景颜色
    			href[index].style.backgroundColor = "black";
    		}
    
    		/**
    		 * 元素动态移动
    		 * @param {动画对象} object
    		 * @param {对象属性} attribute
    		 * @param {目标位置} target
    		 * @param {回调函数} callback
    		 * @param {执行速度} speed
    		 */
    		function bySwitching(object, attribute, target, speed, callback) {
    			clearInterval(object.timer); // 排除已开启的定时器的影响
    			// 获取元素的当前位置
    			var curPosition = parseInt(getElementStyle(object, attribute));
    			if (curPosition > target) {
    				speed = -speed; // 从小向大移动speed为正，否则为负
    			}
    			// 向执行动画的对象中添加其唯一的定时器标识
    			object.timer = setInterval(function() {
    				// 获取元素原来的left值
    				var oldValue = parseInt(getElementStyle(object, attribute));
    				// 在原值的基础上自增/减
    				var newValue = oldValue + speed;
    				/*
    					向左移动：判断newValue是否小于target
    					向右移动：判断newValue是否大于target
    				*/
    				if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
    					newValue = target;
    				}
    				// 更新元素的left值
    				object.style[attribute] = newValue + "px";
    				if (newValue == target) { // 元素移动到0时关闭计时器
    					clearInterval(object.timer);
    					callback && callback(); // 动画执行完毕调用回调函数(有则执行)
    				}
    			}, 30);
    		}
    
    		/**
    		 * 兼容浏览器获取元素的样式
    		 * @param {Object} attrName
    		 * @param {Object} elementObj
    		 */
    		function getElementStyle(elementObj, attrName) {
    			if (window.getComputedStyle) {
    				// 常见具备getComputedStyle()的浏览器
    				return getComputedStyle(elementObj, null)[attrName];
    			} else {
    				// IE8等不具备getComputedStyle()的浏览器
    				return elementObj.currentStyle[attrName];
    			}
    		}
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70]: /images/20221120/55d28fa65909478689b3072c26b85500.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript经典案例：图片流动轮播

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

旧城等待，/ 2022年12月24日 11:00/ 0 赞/ 138 阅读

相关 JavaScript经典案例：图片定时轮播

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

冷不防/ 2022年12月24日 01:51/ 0 赞/ 121 阅读

相关 JavaScript实现图片轮播

//实现照片轮播 1.在没有按钮触发的情况下，四张图片搁几秒，就会实现自动轮播触发按钮单击事件，对应button的照片跳转到我们的窗体div界面

朴灿烈づ我的快乐病毒、/ 2022年08月21日 05:48/ 0 赞/ 231 阅读

相关 javaScript实现图片轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

ゝ一纸荒年。/ 2022年08月10日 11:49/ 0 赞/ 208 阅读

相关 JavaScript实现图片轮播组件

效果：自动循环播放图片，下方有按钮可以切换到对应图片。添加一个动画来实现图片切换。鼠标停在图片上时，轮播停止，出现左右两个箭头，点击可以切换图片。

柔情只为你懂/ 2022年07月13日 12:37/ 0 赞/ 254 阅读

相关原生javascript图片轮播实现

初学javascript，尝试着制作动画-图片轮播。（实现方法挺多）思路：添加多张图片，依次让图片显示。依次显示需要每隔一段时间去更新，因此选择了setInterv

柔情只为你懂/ 2022年06月09日 22:59/ 0 赞/ 288 阅读

相关 JavaScript 实现图片轮播

今天给大家介绍下怎么用 JS 实现图片轮播效果。原理描述：使用JS实现轮播的原理是这样的：假设初始的情况，下图一个网格代表一个图，初始时，显示1 ： ![7

墨蓝/ 2022年05月17日 12:40/ 0 赞/ 252 阅读

相关 javascript图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

深碍√TFBOYSˉ_/ 2022年05月12日 02:44/ 0 赞/ 309 阅读

相关 Javascript实现图片轮播效果。

用js做一个简单的图片轮播效果。思路如下：用JavaScript来控制轮播的图片的样式（margin-left）。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。

Love The Way You Lie/ 2022年01月16日 02:51/ 0 赞/ 502 阅读

相关 jquery经典实例之图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK">

太过爱你忘了你带给我的痛/ 2021年07月24日 18:31/ 0 赞/ 385 阅读