js-轮播图最终版

心已赠人 2022-11-29 14:30 112阅读 0赞

不用点击按钮，图片平滑移动  
整个代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>轮播图改进</title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#box21{
    				
    				width:553px;
    				height: 776px;
    				margin: 0 auto;
    				overflow: hidden;
    				background-color: #ADFF2F;
    				padding: 10px 0;
    				position: relative;
    			}
    			#ul1{
    				list-style: none;
    				position: absolute;
    				left: 0;
    				/*width: 2765px;*/ /*由js设置*/
    			}
    			#ul1 li{
    				/*display: block;*/
    				
    				float: left;
    				margin:0 10px;
    			}
    			#nav{
    				
    				position: absolute;
    				margin:750px 0;
    				/*width: 200px;*/
    				/*left: 226px;*/
    			}
    			#nav a{
    				text-decoration: none;
    				background-color:aqua;
    				display: block;
    				width: 15px;
    				height: 15px;
    				float: left;
    				margin: 0 5px;
    				opacity: 0.5;
    				filter:alpha(opacity=50);
    			}
    		</style>
    		
    		<script type="text/javascript">
    			window.onload = function(){
    				
    				//获取ul
    				var ul1 = document.getElementById("ul1");
    				var imgArr = document.getElementsByTagName("img");
    		
    				//设置ul宽度
    				ul1.style.width = 553*imgArr.length+"px";
    				
    				var nav = document.getElementById("nav");
    				var aAll = document.getElementsByTagName("a");
    //				nav.style.width = 30*aAll.length + "px";可以不设置宽度，由子元素撑开
    				var theNavWidth = parseInt(nav.style.width);
    				var box21 = document.getElementById("box21");
    				nav.style.left = (box21.offsetWidth-nav.offsetWidth)/2 + "px";
    				var index=0;
    				aAll[index].style.backgroundColor = "black";
    				//点击超链接，显示对应图片
    				for(var i=0;i<aAll.length;i++){
    					//为超链接添加num属性
    					aAll[i].num = i;
    					aAll[i].onclick = function(){
    					clearInterval(timer);
    					//获取点击函数的索引
    					index = this.num;
    					
    					setAColor();
    						
    					move(ul1,-553*index,50,"left",function(){
    						changeAuto();
    					});
    					
    					
    				};
    				}
    				changeAuto();
    				/*图片自动变换*/
    				//选中的变红，未选中的变红
    				function setAColor(){
    					//判断当前索引是否是最后一张图片
    					if(index>=imgArr.length-1){
    						index = 0;
    						ul1.style.left = 0+"px";
    					}
    					for(var i=0;i<aAll.length;i++){
    						aAll[i].style.backgroundColor = "";//让它为内联样式
    					}
    					aAll[index].style.backgroundColor = "black";
    				}
    				var timer;
    				function changeAuto(){
    				timer =	setInterval(function(){	
    						
    						index++;
    					
    						index %= imgArr.length;
    						
    						move(ul1,-553*index,50,"left",function(){
    							//修改导航点
    								setAColor();//要在move函数里面调用，否则会出现错误情况
    						});
    					
    						
    					},3000);
    				}
    /*为了实现更多的动画，可以添加一个属性attr,让它可以上下左右移动,还可以传回调函数，在函数执行完毕后执行
     * 
     * 
     */
    		function move(obj,target,speed,attr,callback){
    				var current = parseInt(getStyle(obj,attr));
    				if(current>target){
    							speed = -speed;
    						}//这段代码不能写到里面，否则速度会取反几次，造成移动不确定的情况
    				 clearInterval(obj.timer);
    				 
    				     obj.timer =  setInterval(function(){
    						var oldvalue = parseInt(getStyle(obj,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.timer);
    							callback && callback();
    						}
    					},30);
    				 
    			}
    			function getStyle(obj,name){
    					//currentStyle显示当前元素的样式,只支持IE
    					/*其他浏览器可使用getComputedStyle(),要两个参数，一个是当前元素，第二个是伪元素
    					 * 一般可串null,window的方法，可直接使用
    					 */
    					if(window.getComputedStyle){
    						return getComputedStyle(obj,null)[name];
    					}else{
    						obj.currentStyle[name];
    					}
    
    				}		
    			};
    		</script>
    	</head>
    	<body>
    		 
    		<div id="box21">
    			<ul id="ul1">
    				<li><img id="img3" src="../img/1.jpg" /></li>
    				<li><img id="img4" src="../img/2.jpg" /></li>
    				<li><img id="img5" src="../img/3.jpg" /></li>
    				<li><img id="img6" src="../img/4.jpg" /></li>
    				<li><img id="img7" src="../img/5.jpg" /></li>
    				<li><img id="img3" src="../img/1.jpg" /></li>
    			</ul>
    			
    			<div id="nav">
    				<a href="javascript:;"></a>
    				<a href="javascript:;"></a>
    				<a href="javascript:;"></a>
    				<a href="javascript:;"></a>
    				<a href="javascript:;"></a>
    				
    			</div>
    		</div>
    	</body>
    </html>