轮播图-CSDN博客

本文链接：https://blog.csdn.net/ZzyUHan/article/details/81456929

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: o;
				padding: 0;
			}
			#box1{
				width: 404px;
				height: 216px;
				margin: 200px auto;
				padding: 10px 0;
				background-color: pink;
				position: relative;
				overflow: hidden;
			}
			/*图片大小384*216*/
			#imglist{
				list-style: none;
				margin: 0;
				height: 216px;
				/*width: 2900px;*/
				position: absolute;
			}
			#imglist li{
				float: left;
				margin: 0 10px;
			}
			#box2{
				position: absolute;
				bottom: 20px;
				/*left: 146px;*//*(404-112)/2*/
			}
			#box2 span{
				float: left;
				width: 10px;
				height: 10px;
				margin: 0 3px;
				background-color: red;
				opacity: 0.5;
			    /*IE8透明*/
				filter: alpha(opacity=50);
			}
			#box2 span:hover{
				background-color: black;
			}
		</style>
		<script type="text/javascript" src="js/setInterval.js" ></script>
		<script type="text/javascript">
			window.onload = function(){
				var imglist = document.getElementById("imglist");
				
				var imgArr = document.getElementsByTagName("img");
				
				imglist.style.width = 404*imgArr.length+"px";
				
				var box1 = document.getElementById("box1");
				
				var box2 = document.getElementById("box2");
				
				var box2Arr = document.getElementsByTagName("span");
				
				box2.style.left = (box1.offsetWidth - box2.offsetWidth)/2+"px";
				//定义索引为0第一张图片
				var index = 0;
				//默认第一张图片的按钮为黑色
				box2Arr[index].style.backgroundColor = "black";
				//遍历所有的图片
				for(var i=0 ; i < box2Arr.length ; i++){
					//每一张图片设置一个记号为当前索引
					box2Arr[i].num = i;
					//设置切换按钮单击响应函数
					box2Arr[i].onclick = function(){
						//关闭自动切换图片定时器
						clearInterval(timer);
						//图片记号赋值给索引index
						index = this.num;
						//imglist.style.left = -404*index+"px";
						//调用设置选中的span颜色的函数
						setA();
						//调用move函数
						move(imglist , -404*index , 10 , "left" , function(){
							//切换图片完成再开启自动切换图片
							autoChange();
						});
					};
				}
				//console.log(imgArr.length);
				//调用自动切换
				autoChange();
				//创建一个方法用来设置选中的span
				function setA(){
					//判断当前索引是否为最后一张图片
					if(index == imgArr.length-1){
						//设置为0
						index = 0;
						//最后一张和第一张一样
						//直接切换成第一张
						imglist.style.left = 0;
					}
					//遍历所有的span
					for(var i=0 ; i<box2Arr.length ; i++){
						box2Arr[i].style.backgroundColor = "";
					}
					//将选中的span设置为黑色
					box2Arr[index].style.backgroundColor = "black";
				}
				//定义一个自动切换图片的定时器标识
				var timer;
				//创建函数，开启自动切换图片
				function autoChange(){
					
					//开启定时器，定时切换图片
					timer = setInterval(function(){
						//索引自增
						index++;
						//判断索引值
						index %= imgArr.length;
						//执行切换
						move(imglist , -404*index , 10 , "left" , function(){
						    //修改导航按钮	
							setA();
						});
					},3000);
				}
			};
		</script>
	</head>
	<body>
		<!--创建盒子轮播图片-->
		<div id="box1">
			<!--创建ul，放置图片-->
			<ul id="imglist">
				<li><img src="img/timg.png"/></li>
				<li><img src="img/timg-(1).png"/></li>
				<li><img src="img/timg-(2).png"/></li>
				<li><img src="img/timg-(3).png"/></li>
				<li><img src="img/timg-(4).png"/></li>
				<li><img src="img/timg-(5).png"/></li>
				<li><img src="img/timg-(6).png"/></li>
				<li><img src="img/timg.png"/></li>
			</ul>
			<!--创建快捷按钮-->
			<div id="box2">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>
</html>

js代码

    //创建一个函数保存
	//创建参数：
	//        obj:执行对象
	//        target：执行的目标位置        
	//        v:移动速度
	//        manner:要执行对象的样式，比如left、top、width、height...
	//        callback:回调函数，将会在对象执行完毕后执行
	function move(obj , target , v , manner , callback){
			
			//关闭该其他定时器
			clearInterval(obj.timer);
			
			//获取box初始当前的left值,parseInt用于取出合法数字
			var oldstart = parseInt(getStyle(obj , manner));
			
			//判断速度的正负值
			//向右移动为正，向左移动为负
			if(oldstart > target){
				//目标位置在当前位置的左边，则速度应为负值
				v = -v;
			}
			
			//开启一个定时器执行动画效果
			obj.timer = setInterval(function(){
				
			    //获取box1当前的left值,parseInt用于取出合法数字
			    var oldbox = parseInt(getStyle(obj , manner));
			     
			    //在旧值上增加
			    var newbox = oldbox + v;
			    
			    //判断newbox是否大于target
			    if((v >0 && newbox > target) || (v <0 && newbox < target)){
			    	newbox = target;
			    }
			    
			    //将新值设置给box
			    obj.style[manner] = newbox +"px";
			    
			    //当方块移动到box2边缘就停止移动
			    if(newbox == target){
			    	clearInterval(obj.timer);
			    	//对象执行完毕，调用回调函数
			    	callback&&callback();
			    }
			    
			},10);
	};
	
	//定义一个函数，用来获取指定元素的当前样式
	//参数：
	//     obj 要获取样式的元素
	//     name 要获取的样式名
	function getStyle(obj , name){
		if(window.getComputedStyle){
			//正常浏览器具有getComputedStyle()方法
			return getComputedStyle(obj , null)[name];
		}else{
			//IE8没有getComputedStyle()方法
			return obj.currentStyle[name];
		}
	}