JS简单的轮播图

于 2018-04-11 21:06:53 发布
阅读量231 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 前端端端端端端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/william_jzy/article/details/79903065 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#outer{
				width: 500px;
				height: 270px;
				/*居中*/
				margin: 30px auto;
				padding: 10px 0;
				background-color: greenyellow;
				position: relative;
				overflow: hidden;
			}
			#imgList{
				/*width: 480px;*/
				height: 270px;
				/*去除项目符号*/
				list-style: none;
				/*设置定位*/
				position: absolute;
				left = 0;
			}
			#imgList img{
				/*设置图片大小*/
				width: 480px;
			}
			#imgList li{
				float: left;
				margin: 0 10px;
			}
			#navDiv{
				/*开启绝对定位*/
				position: absolute;
				bottom: 15px;
			}
			#navDiv a{
				/*设置浮动*/
				float: left;
				/*设置样式*/
				width: 15px;
				height: 15px;
				background-color: red;
				/*设置透明度*/
				opacity: 0.5;
				/*兼容IE8*/
				filter: alpha(opacity:50);
				margin: 0 5px;
			}
			#navDiv a:hover{
				background-color: black;
			}
		</style>
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var imgList = document.getElementById("imgList");
				var imgArr = document.getElementsByTagName("img");
				
				//设置imgList的宽度
				imgList.style.width = 500 * imgArr.length +"px";
				
				var outer = document.getElementById("outer");
				var navDiv = document.getElementById("navDiv");
				//设置链接居中
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				
				//创建一个变量存放当前显示图片的索引
				var index = 0;//默认是0
				//获取所有a
				var allA = document.getElementsByTagName("a");
				//设置当前a的样式
				allA[index].style.backgroundColor = "black";
				
				//为每个链接绑定一个单击响应函数
				for(var i=0; i<allA.length ; i++){
					
					//为每个链接添加一个num属性，表示第几个链接
					allA[i].num = i;
					
					allA[i].onclick = function(){
						
						//点击按钮时，停止自动切换图片
						clearInterval(timer);
						//点击链接后，此时index的值是当前num
						index = this.num;
						
						//切换图片
						//imgList.style.left = -500*index + "px";
						setA();
						move(imgList , "left" , -500*index , 300 ,function(){
							//在结束时，再次开启自动切换图片
							autoChange();
						});
					};
				}
				
				autoChange();
				
				//设置所有的a
				function setA(){
					//判断当前图片是否是最后一张
					if(index>=imgArr.length-1){
							index = 0;
							imgList.style.left = 0;
						}
					
					//遍历所有的a，使他们恢复默认样式
					for(var i = 0 ; i<allA.length ; i++){
						allA[i].style.backgroundColor = "";
					}
					//当前a的样式
					allA[index].style.backgroundColor = "black";
				};
				
				var timer;
				//自动切换
				function autoChange(){
					timer = setInterval(function(){
						
						//使索引自增
						index++;
						index %= imgArr.length;
						
						//自动切换图片
						move(imgList , "left" , -500*index , 20 ,function(){
							//改变a的样式
							setA();
						});
					}, 3000);
				};
				
			};
			
		</script>
		
	</head>
	<body>
		<div id="outer">
			<ul id="imgList">
				<li><img src="img/william/01.jpg"/></li>
				<li><img src="img/william/02.jpg"/></li>
				<li><img src="img/william/03.jpg"/></li>
				<li><img src="img/william/04.jpg"/></li>
				<li><img src="img/william/01.jpg"/></li>
			</ul>
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
		
	</body>
</html>

效果如图：
这里写图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#out{
				width: 500px;
				height: 270px;
				background-color: pink;
				/*居中*/
				margin: 30px auto;
				padding:10px 0 ;
				/*隐藏溢出的部分*/
				overflow: hidden;
				position: relative;
				
			}
			#imgLi{
				/*去除样式*/
				list-style: none;
				height: 270px;
				position: absolute;
				left: 0px;
			}
			#imgLi img{
				width: 480px;
			}
			#imgLi li{
				/*设置浮动*/
				float: left;
				margin: 0 10px;
			}
			#left,#right{
				width: 30px;
				height: 50px;
				background-color: lightcoral;
				
				position: absolute;
				top: 120px;
				/*透明度*/
				opacity: 0.5;
				filter: alpha(opacity:50);
			}
			#left a,#right a{
				text-decoration: none;
			}
			#left{
				left:15px;
			}
			#right{
				right:15px;
			}
			
		</style>
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var out = document.getElementById("out");
				var imgLi = document.getElementById("imgLi");
				var imgArray = document.getElementsByTagName("img");
				var left = document.getElementById("left");
				var right = document.getElementById("right");
				
				//设置imgLi的宽度
				imgLi.style.width = 500 * imgArray.length +"px";
				
				//创建一个变量存放当前显示图片的索引
				var index = 0;
				//开启自动切换图片
				autoChange();
				
				//创建切换上一张图片按钮的单击响应函数
				left.onclick = function(){
					//点击按钮后先停止自动切换图片
					clearInterval(timer);
					//点击时切换图片到上一张
					if(index==0){
	                    imgLi.style.left = -2000+'px';
						index = imgArray.length-1;
					}
					move(imgLi , "left" , -500*(index-1) , 20 , function(){
						    console.log(index);
							index -= 1;
							if(index<0){
	                            imgLi.style.left = -2000+'px';
							    index = imgArray.length-1;
							}
							autoChange();
						});
					
				};
				//创建切换下一张图片按钮的单击响应函数
				right.onclick = function(){
					//点击按钮后先停止自动切换图片
					clearInterval(timer);
					//点击时切换图片到下一张
					move(imgLi , "left" ,  -500*(index+1) , 20 , function(){
                        index += 1;
						if(index>=imgArray.length-1){
							//最后一张，则使索引变为0，left变为0
							imgLi.style.left = 0+'px';
							index = 0;
						}
						autoChange();
					});
				};
				
				//创建一个变量存放定时器标识
				var timer;
				
				function autoChange(){
					//设置图片自动播放				
					timer = setInterval(function(){
						//使索引自增
						index++;
						index %= imgArray.length;
						//自动切换图片
						move(imgLi, "left" , -500*index , 20 ,function(){
							if(index>=imgArray.length-1){
								//最后一张，则使索引变为0，left变为0
								index = 0;
								imgLi.style.left = 0;
							}
						});
						
					},3000);
				};
				
			};
			
		</script>
		
	</head>
	<body>
		<div id="out">
			<ul id="imgLi">
				<li><img src="img/01.jpg"/></li>
				<li><img src="img/02.jpg"/></li>
				<li><img src="img/03.jpg"/></li>
				<li><img src="img/04.jpg"/></li>
				<li><img src="img/01.jpg"/></li>
			</ul>
			<div id="left"><a href="javascript:;"> < </a></div>
			<div id="right"><a href="javascript:;"> > </a></div>
		</div>
	</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值