JS——实现轮播图（完整功能）

花里梦雨

于 2022-03-31 10:33:19 发布

5515

分类专栏： JavaScript 文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/qq_37369201/article/details/123865058

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

没有把细节单拎出来讲，但基本上所有重要步骤都在代码里边备注解释了~~

个人认为比较难的地方就是：

怎么在自动播放到最后一张图片后，瞬间切换回第一张图片重新播放？

这里采用了比较取巧的方法，比如我用了四张例图，然后我把第一张再次添加到最后，就是这样：
在这里插入图片描述
然后在setA函数中，做这样一个判断

		if (index >= imgArr.length - 1) {
			index = 0
			// 此时我们设置的是，最后一张图片和第一张图片相同，
			// 因此通过css把最后一张瞬间切换到第一张！！！
			ul.style.left = 0
		}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- tool.js中的move函数 -->
		<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			/* 总div的样式 */
			#outer {
				/* 图片宽度是640，li设置的坐和右的外边距都是10，所以外容器宽度设置成660px */
				width: 660px;
				height: 639px;
				background-color: #bfa;
				margin: 50px auto;
				padding: 10px 0;
				/* 子绝父相 */
				position: relative;
				/* 裁减掉自身宽度之外的元素 */
				overflow: hidden;
			}

			/* ul的样式 */
			#ul {
				/* 去掉点 */
				list-style: none;
				/* （图片宽640+图片间的外边距10+10）x 4 */
				width: 2640px;
				/* 开启绝对定位，方便移动left来显示不同的图片 */
				position: absolute;
				/* 通过js来控制left的值 */
				left: 0px;

			}

			/* 图片放在li中 */
			#ul li {
				/* li是块元素，通过浮动使其中的图片排列到一行去 */
				float: left;
				/* 图片间的外边距 */
				margin: 0 10px;
			}

			/* 图片下方导航条的样式 */
			#navDiv {
				/* 开启绝对定位，为了将其移动到图片下方 */
				position: absolute;
				/* 移动位置到下边 */
				bottom: 20px;
			}

			/* 每一个导航格都是一个超链接，和对应顺序的图片绑定 */
			#navDiv a {
				width: 20px;
				height: 20px;
				/* 行内元素不能设置宽高，故转换成行内块元素 */
				display: inline-block;
				background-color: #00CC00;
				margin: 0 10px;
				/* 透明效果 */
				opacity: 0.5;
			}

			#navDiv a:hover {
				background-color: black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				// 获取保存图片的数组
				var imgArr = document.getElementsByTagName("img")

				var ul = document.getElementById("ul")
				// 设置ul的动态宽度
				ul.style.width = 660 * imgArr.length + "px"

				var navDiv = document.getElementById("navDiv")
				var outer = document.getElementById("outer")
				// 导航条居中
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px"

				// 默认选中的是第一张图片
				var index = 0
				var allA = document.getElementsByTagName("a")
				allA[index].style.backgroundColor = "black"

				// 创建自动切换图片函数
				var flag

				function autoChange() {
					flag = setInterval(function() {
						// 索引自增
						index++
						// 防止索引超过图片数目
						index %= imgArr.length
						// move函数是存放在tools里边的
						move(ul, "left", -660 * index, 20, function() {
							// 修改导航点，让其随着图片的切换发生变化
							setA()
						})
					}, 2000)
				}

				autoChange()

				// 点击li中超链接，显示对应顺序的图片，给所有的超链接绑定单机响应函数
				for (var i = 0; i < allA.length; i++) {
					// 为每一个超链接添加一个num属性
					allA[i].num = i
					allA[i].onclick = function() {
						clearInterval(flag)
						// alert(this.num)
						// 获取超链接的索引
						index = this.num
						setA()  
						// 使用move函数切换图片
						move(ul, "left", -660 * index, 30, function() {
							// 单机动画结束之后，图片要继续自动播放
							autoChange()
						})
					}
				}
				// 设置一个方法专门来设置选中的超链接（导航块） 
				function setA() {
					// 判断当前索引是不是最后一张图片
					if (index >= imgArr.length - 1) {
						index = 0
						// 此时我们设置的是，最后一张图片和第一张图片相同，
						// 因此通过css把最后一张瞬间切换到第一张！！！
						ul.style.left = 0
					}
					// 遍历所有的a,都设置成lvse
					for (var i = 0; i < allA.length; i++) {
						// 但期数设置的是空字符串，防止这个属性变成内联样式消掉hovor效果
						allA[i].style.backgroundColor = ""
					}
					// 将选中的a变成黑色
					allA[index].style.backgroundColor = "black"
				}
			}
		</script>
	</head>
	<body>
		<div id="outer">
			<ul id="ul">
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<!-- 在最后加一个第一张图片 -->
				<li><img src="img/1.jpg"></li>
			</ul>

			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<!-- <a href="javascript:;"></a> -->
			</div>
		</div>
	</body>
</html>

tool.js中的move函数：

// 封装成函数
				
				// var flag


	function move(obj, attr, target, speed, callBack){
			/* 
			 * obj：移动对象
			 * attr：执行样式
			 * target：目标位置
			 * speed：移动速度
			 * callBack：回调函数
			 */
		clearInterval(obj.flag)
		
		var current = parseInt(window.getComputedStyle(obj, null)[attr])
		
		if(current > target){
			speed = -speed
		}
			
		obj.flag = setInterval(function(){
			var oldValue = parseInt(window.getComputedStyle(obj, null)[attr])
			var newValue = oldValue + speed
			
			if(speed > 0 && newValue > target || speed < 0 && newValue < target){
				newValue = target
			}
				
			obj.style[attr] = newValue + "px"
			
			if(newValue == target){
				clearInterval(obj.flag)
				callBack && callBack()
			}
		}, 30)
	}

花里梦雨

关注

4
点赞
踩
34

收藏

觉得还不错? 一键收藏
打赏
3
评论
JS——实现轮播图（完整功能）

没有把细节单拎出来讲，但基本上所有重要步骤都在代码里边备注解释了~~个人认为比较难的地方就是：怎么在自动播放到最后一张图片后，瞬间切换回第一张图片重新播放？这里采用了比较取巧的方法，比如我用了四张例图，然后我把第一张再次添加到最后，就是这样：然后在setA函数中，做这样一个判断 if (index >= imgArr.length - 1) { index = 0 // 此时我们设置的是，最后一张图片和第一张图片相同， // 因此通过css把最后一张瞬间切换到第一张！！
复制链接

扫一扫