003_JS实现图片轮播与点击播放

最新推荐文章于 2022-02-23 17:46:17 发布

_枸杞子_

最新推荐文章于 2022-02-23 17:46:17 发布

阅读量434

点赞数

分类专栏： JavaScript_积累版文章标签：图片轮播

本文链接：https://blog.csdn.net/qq_33605778/article/details/76788251

版权

JavaScript_积累版专栏收录该内容

6 篇文章 0 订阅

订阅专栏

步骤：
1、布局：
   outer[div]
       ----imgList[ul]
               ----li(总共5个)
                   ----img(放轮播图)
       ----navDiv[div]
               ----a（总共5个）
2、原理：
       - outer作为“屏幕”，超出屏幕的部分hidden。
       - imgList里面的li排成一排，imgList包含在outer中。
       - JS控制imgList，左右移动。
       - a标签根据索引值：-indexA*li宽度，得出每张图片的开始位置，完成点击a标签，切换图片。
3、注意：
       - move函数的实现，应该好好理解。
       - 点击a标签的优先级，应该高于定时轮播，所有点击a标签的时候，停止定时器，完成动画后，开启定时器。

- 这是一个类似循环播放的效果——最后一张图片很关键，用于完成瞬间移动。

测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--
			步骤：
			1、布局：
				outer[div]
					----imgList[ul]
							----li(总共5个)
								----img(放轮播图)
					----navDiv[div]
							----a（总共5个）
			2、原理：
					- outer作为“屏幕”，超出屏幕的部分hidden。
					- imgList里面的li排成一排，imgList包含在outer中。
					- JS控制imgList，左右移动。
					- a标签根据索引值：-indexA*li宽度，得出每张图片的开始位置，完成点击a标签，切换图片。
			3、注意：
					- move函数的实现，应该好好理解。
					- 点击a标签的优先级，应该高于定时轮播，所有点击a标签的时候，停止定时器，完成动画后，开启定时器。
					- 这是一个类似循环播放的效果——最后一张图片很关键，用于完成瞬间移动。
		-->
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#outer {
				width: 500px;
				height: 333px;
				margin: 10px auto;		/*左右居中*/
				background-color: greenyellow;
				padding: 10px 0;	/*设置上下的padding为10px*/
				position: relative;
				overflow: hidden;
			}
			
			#imgList {
				list-style: none;   	/*去除li的默认样式*/
				width: 2600px;
				left:0px;
				position: absolute;		/*开启绝对定位，便于移动*/
			}
			
			#imgList li {
				float: left;			/*float:父元素够大的时候，才会横排*/
			}
			
			#navDiv {
				position: absolute;		/*设置绝对定位，才能显示到上面*/
				bottom: 15px;
			}
			
			#navDiv a {
				float: left;	/*浮动，脱离文档流，横排*/
				width: 12px;
				height: 12px;
				margin: 0 5px;
				background-color: red;
				opacity: 0.5;
				/*兼容IE8透明*/
				filter: alpha(opacity=50);
			}
			
			#navDiv a:hover {
				background-color: black;
			}
		</style>
		
		<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			window.onload = function() {
				//获取节点
				var outer = document.getElementById("outer");
				var imgList = document.getElementById("imgList");
				var countImg = imgList.getElementsByTagName("li");
				var navDiv = document.getElementById("navDiv");
				var allA = navDiv.getElementsByTagName("a");
				
				//第一张图片的a标签先被选中
				var indexA = 0;
				allA[indexA].style.backgroundColor = "black";
				
				//为所有的a标签绑定单击响应函数
				for (var i = 0; i < allA.length; i++) {
					//保存超链接所在索引（前面的课程说过为什么这样）
					allA[i].num = i;
					//绑定单击响应函数
					allA[i].onclick = function() {
						//点击超链接时，应该停止轮播定时器，不然会出现两个动画
						clearInterval(idTimer);
						
						//点击超链接，切换图片
						indexA = this.num;
						move(imgList,"left",indexA*-500,20,function(){
							//点击的动画执行完了，开启轮播定时器
							autoChange();
						});
						//a标签颜色处理
						mutexA();
					}
				}
				
				//设置导航按钮居中
				var navDivWidth = parseInt(getComputedStyle(navDiv,null)["width"]);
				var outerWidth = parseInt(getComputedStyle(outer,null)["width"]);
				navDiv.style.left = (outerWidth - navDivWidth)/2 + "px";
				
				//设置imgList宽度（图片+20）*数量
				var imgWidth = 500;
				var imgMargin = 0;
				imgList.style.width = (imgMargin + imgWidth)*countImg.length + "px";
				
				//轮播图片
				var idTimer;
				function autoChange() {
					idTimer = setInterval(function() {
						indexA++;
						//a标签设置
						move(imgList,"left",indexA*-500,20,function(){

							mutexA(allA,indexA);							
						});
					
					},3000);

				}
				
				//开启定时器
				autoChange();
				
				//互斥a标签
				function mutexA() {
					//索引值回到开头
					if( indexA >= countImg.length - 1) {
						indexA = 0;
						imgList.style.left = 0 + "px";
					}
					
					//该索引a标签变黑色，其它标签红色
					for (var j = 0; j < allA.length; j++) {
						if( j == indexA ) {
							allA[j].style.backgroundColor = "black";
						} else {
							allA[j].style.backgroundColor = "";		//这样做是因为，内联样式优先级更高，
																	//直接设置为red，会覆盖hover效果，
																	//这里直接去掉内联样式，它就受style里面的样式控制了
						}
					}					
				}
			}
		</script>
		
	</head>
	<body>
		<div id="outer">
			<ul id="imgList">
				<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/5.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>

_枸杞子_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
003_JS实现图片轮播与点击播放

步骤：1、布局： outer[div] ----imgList[ul] ----li(总共5个) ----img(放轮播图) ----navDiv[div] ----a（总共5个）2、原理： - outer作为“屏幕”
复制链接

扫一扫