原生JS写轮播图

大鱼一生
于 2020-11-25 18:32:08 发布
阅读量132
点赞数 1
分类专栏： JavaScript 文章标签： javascript
本文链接：https://blog.csdn.net/qq_45845523/article/details/110139641
版权
JavaScript 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
原生JS写轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/*设置outer的样式*/
			#outer{
				width: 380px;
				height: 270px;
				/*居中*/
				margin: 50px auto;
				/*设置背景颜色*/
				background-color: #00FFFF;
				padding: 5px;
				/*开启相对定位*/
				position: relative;
				/*裁剪内容*/
				overflow: hidden;
			}
			#imgList{
				/*去掉圆点*/
				list-style: none;
				/*设置li宽度*/
				/* width: 2500px; */
				/*开启绝定位*/
				position: absolute;
				/*设置偏移量*/
				left: 0px;
			}
			#imgList li{
				/*li横向排列*/
				float: left;
				/*设置间距*/
				margin: 0 10px;
			}
			/*导航按钮*/
			#navDiv{
				/*开启绝对定位*/
				position: absolute;
				bottom: 5px;
				
			}
			#navDiv a{
				/*设置超链接浮动*/
				float: left;
				background-color: 		#888888   ;
				width: 20px;
				height: 20px;
				/*左右外边距*/
				margin: 0 5px;
				/*设置透明*/
				opacity: 0.5;
				/*兼容IE8透明*/
				filter: alpha(opacity=50);
			}
			/*设置鼠标移入的效果*/
			#navDiv a:hover{
				background-color: #000000;
			}
		</style>
		<!-- 引入 -->
		
		<script type="text/javascript">
			window.onload = function(){
				
				
				
				//设置imgList的宽度
				//获取imgList
				var imgList = document.getElementById("imgList");
				//获取页面中所有的img标签
				var imgArr = document.getElementsByTagName("img");				
				//设置imgList的宽度
				imgList.style.width = 390*imgArr.length+"px";
				
				
				
				//设置导航按钮居中
				//获取navDiv
				var navDiv = document.getElementById("navDiv");				
				//获取outer
				var outer = document.getElementById("outer");				
				//设置navDiv的left值
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";				 
				
				
				//默认显示图片的索引
				var index = 0;			
				//获取所有的a
				var allA = document.getElementsByTagName("a");		
				//设置默认选中的效果
				allA[index].style.backgroundColor = "#000000 ";
				
					/*
					* 点击超链接切换到指定的图片
					*/
				//为所有的超链接绑定单击响应函数
				for(var i=0 ; i<allA.length ; i++){
				   
					//为每一个超链接添加一个num属性
					allA[i].num = i;
				   
					allA[i].onclick = function(){
						
						//关闭自动切换的定时器
						clearInterval(timer);
						
						//获取点击超链接的索引，并将其设置为index
						index = this.num
					   
						//切换图片
						//imgList.style.left = -390*index +"px";
						
						//使用move函数切换图片
						move(imgList,"left",-390*index,50,function(){
							
							//动画执行完毕，开启自动切换图片
							autoChange();
							
						});
						
						//修改正在选中的a
						setA();
					   
					};
				};
			   
				//自动切换图片
				autoChange();
			   
				//创建一个方法，用来设置选中的a
				function setA(){
					
					//判断当前索引是否是最后一张图片
					if(index >= imgArr.length-1){
						//则将index设置为0
						index = 0;
						
						//此时显示的最后一张图片，而随后一张图片和第一张是一模一样的
						//通过css将最后一张切换成第一张
						imgList.style.left = 0;
					};
					
					//遍历所有的a，并将它们的背景颜色设置为	#888888 
					for(var i=0 ; i<allA.length ; i++){
						allA[i].style.backgroundColor = "";
					};
					
					//将选中的a设置为黑色
					allA[index].style.backgroundColor = "#000000 ";
			   };
			   
				//定义一个自动切换的定时器标识
				var timer;
				
				//创建一个函数，用来切换图片
				function autoChange(){
					
					//开启一个定时器，用来切换图片
					timer = setInterval(function(){
						
						//使用索引自增
						index++;
						
						//判断index值
						index %= imgArr.length;
						
						//执行动画
						move(imgList,"left",-390*index,20,function(){
							//修改导航点
							setA();
						});
						
					},3000);
					
				};
				/*
				* 参数：
				* obj  要执行动画的对象
				* attr   要执行动画的样式  left top width height
				* target  执行动画的目标位置
				* speed  移动的速度（正数向右，负数向左）
				* callback   在
				*/
				function move(obj , attr , target , speed , callback){
					//关闭上一个定时器
					clearInterval(obj.timer);
					//获取元素目前的位置
					//parseInt（）将字符串中的合法数字取出来
					var current = parseInt( getStyle(obj,attr));
					//判断速度的正负值
					if(current > target){
						//此时速度为负值
						speed = -speed;
					};
					//开启定时器，执行动画效果
					obj.timer = setInterval(function(){
						//parseInt（）将字符串中的合法数字取出来
						var oldValue = parseInt( getStyle(obj,attr));
						//在旧值的基础上增加
						var newValue = oldValue + speed ;
						//向左移动时，需要判断nexValue是否小于target
						//向右移动时，需要判断nexValue是否大于target
						if( speed < 0 && newValue < target || speed > 0 && newValue > target){
							newValue = target;
						};
						//将新值设置给box1
						obj.style[attr] = newValue + "px";
						//当我们的元素运动到800时停止
						if(newValue === target){
							//到达目标，关闭定时器
							clearInterval(obj.timer);
							//动画执行完毕，调用回调函数
							callback && callback();
						};
					},50);
				};
				
				
				
				
				/*
				* 定义一个函数，用于获取指定元素的当前样式
				* 参数：
				* ---obj 要获取样式的元素
				* ---name 要获取的样式名
				*/
				//获取元素的所有样式
				function getStyle(obj , name){
					if(window.getComputedStyle){
						//正常浏览器
						return getComputedStyle(obj , null)[name];
					}
					else{
						//IE8浏览器  要设置属性的值
						return obj.currentStyle[name];		
					}	
				};
				
				
				
				//定义一个函数，用来向一个元素中添加指定的class属性值
				/*
				 * 参数:
				 * 	obj 要添加class属性的元素
				 *  cn 要添加的class值
				 * 	
				 */
				function addClass(obj, cn) {
					//检查obj中是否含有cn
					if(!hasClass(obj, cn)) {
						obj.className += " " + cn;
					}
				}
				
				
				/*
				 * 判断一个元素中是否含有指定的class属性值
				 * 	如果有该class，则返回true，没有则返回false
				 * 	
				 */
				function hasClass(obj, cn) {
					//判断obj中有没有cn class
					//创建一个正则表达式
					//var reg = /\bb2\b/;
					var reg = new RegExp("\\b" + cn + "\\b");
					return reg.test(obj.className);
				}
				
				
				/*
				 * 删除一个元素中的指定的class属性
				 */
				function removeClass(obj, cn) {
					//创建一个正则表达式
					var reg = new RegExp("\\b" + cn + "\\b");
					//删除class
					obj.className = obj.className.replace(reg, "");
				}
				
				
				/*
				 * toggleClass可以用来切换一个类
				 * 	如果元素中具有该类，则删除
				 * 	如果元素中没有该类，则添加
				 */
				function toggleClass(obj, cn) {
					//判断obj中是否含有cn
					if(hasClass(obj, cn)) {
						//有，则删除
						removeClass(obj, cn);
					} else {
						//没有，则添加
						addClass(obj, cn);
					}
				}
			};
		</script>
	</head>
	<body>
		<!-- 创建一个外部div,来作为大的容器 -->
		<div id="outer">
			<!-- 创建一个ul，用来放置图片 -->
			<ul id="imgList">
				<li><img src="..." ></li>
				<li><img src="..." ></li>
				<li><img src="..." ></li>
				<li><img src="..." ></li>
				<li><img src="..." ></li>
				<li><img src="..." ></li>
				<li><img src="..." ></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>
				<a href="JavaScript:;"></a>
			</div>
		</div>
	</body>
</html>
大鱼一生
关注
1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS写轮播图

原生JS写轮播图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /*设置outer的样式*/ #outer{ width: 380px; height: 270p
复制链接

扫一扫
专栏目录