简易代码实现超简单实用轮播图

矫情吗；* 2023-06-21 07:18 43阅读 0赞

## 简易代码实现超简单实用轮播图 ##

**1.**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>轮播图</title>
    		<style>
    			.hr_100 { height: 100px;}
    			.box { 
    				width:520px;
    				height:300px;
    				border: 1px solid red;
    				margin: 0 auto;
    			}
    			img { 
    				width:520px;
    				height:280px;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div class="hr_100"></div>
    		<div class="box"><img src="img/taobao1.png" alt="" id="img0"/>
    		<div id="number" >
           <span>1</span>   
           <span>2</span>    
           <span>3</span>
           <span>4</span>
           <span>5</span>
         </div>
    		</div>
    		<script>
    			
    			var i=0;
    			var lb_img=["img/taobao1.png","img/taobao2.png","img/taobao3.png","img/taobao4.png","img/taobao5.png"];
    			function imgBox() 
    			{ 	
    			var imgbox=document.getElementById("img0");
    			imgbox.src=lb_img[i];
    			
    			var spanArray=
    	   		document.getElementsByTagName("span");//它是可以相当一个数组的
    	   		for(var t=0;t<spanArray.length;t++) { 
    			spanArray[t].style.color="black";}
    	   		//这个大括号决定了是同时显示还是从2开始变色
    			spanArray[i].style.color="red";
    			//这里的i必须放后面才不会错位
    			i++;
    			if(i==5)
    			{ 
    				i=0;
    			}
       			}
    			setInterval("imgBox()",1000);//一般这里面放的还是函数，所以还是要构建函数
    		</script>
    //首先是构建一个数组，用来存放图片的路径；
    通过调用图片的id.src=数组[],来对应到相应的照片；
    然后用setInterval("imgBox()",1000);实现每一秒调用一次。
    但是缺陷在于这是一种置换图片的方式，并不是从左到右的一种推进式轮播
    	</body>
    </html>

**2.  
标准化：即每个函数只实现一个效果或功能，便于封装，调用，层次也清晰。**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #outer{ 
    	width:520px;
    	height:300px;
    	border:1px solid yellow;
    	margin:0 auto;
    	}
    </style>
    </head>
    
    <body>
      <div id="outer">
         <img src="img/taobao1.png" id="shop_pic"/>
         <div id="number" >
           <span>1</span>   
           <span>2</span>    
           <span>3</span>
           <span>4</span>
         </div>
      </div>
    </body>
    <script>
       var i=0;
       var shop_pic_names = 
       ["img/taobao1.png","img/taobao2.png","img/taobao3.png","img/taobao4.png"];
       function AutoChangePic()
       { 
    	  var picEle =
    	  document.getElementById("shop_pic");
    	  picEle.src =shop_pic_names[i];
    	  AutoChangeNumColor(i);
    	  i++; 
    	  //i= i%4;           
    	  if( i==4)
    	  { 
    		  i=0;
    	  }
    	  //-------------
    	  /*
    	  var picArray=
    	  document.getElementsByTagName("img");
    	  picArray[0].src="pic2.jpg";
    	  */
       }
       function AutoChangeNumColor(i)
       { 
    	   var spanArray=
    	   document.getElementsByTagName("span");
    	   for(var t=0;t<spanArray.length;t++)
    	   { 
    		 spanArray[t].style.color="black";   
    	   }
    	   spanArray[i].style.color="red";
    	   
    	   
       }
       setInterval("AutoChangePic()",1000);
    </script>
    </html>

两者效果是一样的，有对比才更好理解。  
图片来自淘宝banner图，可自行下载！