HTML页面；js动态切换图片（2种方法。。。持续更新。。。）

一、

1. 思路是先定义一个图片显示块div，
2. 在块内定义图片列表以float：left横排；
3. 改变图片列表的位置以显示不同的图片；
4. HTML代码如下：

   <div id="slide">
       <ul id="photos">
           <li><img src="images/pic1.jpg"></li>
           <li><img src="images/pic2.jpg"></li>
           <li><img src="images/pic3.jpg"></li>
       </ul>

    

5. css代码：

   /*图片div*/
       #slide{    
           overflow: hidden; /*溢出则隐藏*/
           width:268px;    /*要显示图片框的大小*/
           height:200px;
           position: relative;    /*相对定位*/
       }
   /*图片列表*/
       #photos{
           padding:0px;    /*迷之边框，不明原因*/
           width:1200px; /*要足够大*/
           height: 200px;
           position: absolute;    /*绝对定位*/
       }
       #photos li{
           float:left;    /*图片横向浮动*/
           width:260px;
           height:200px;
           list-style: none;
           
       }

    

6. js代码：

   function slide_photos(){
   	var photos = document.getElementById("photos");
       var pli = photos.getElementsByTagName("li");
   
   	var left = photos.offsetLeft;    //图片距离显示框的左边距
       var width = pli[0].offsetWidth;    //一张图片的宽度
       var lis = pli.length;    //图片列表长度
   
       //如果图片距离显示框边距大于图片总长度-1，则重新设置位置， 否则递增；
   	if(-left>= (lis-1)*width){
   		photos.style.left= 0+ "px";
   		
   	}else{
   		left-= width;	
   		photos.style.left= left+ "px";
   	}
   }
   
   //设置重新加载时间，2000毫秒
   window.setInterval("slide_photos()",2000);

   直接把js代码放在<script></script>标签中，或者外联<script src="../js/slide.js"></script>

二、

1. 思路是：直接更换<img>，在js里创建图片列表进行切换；
2. HTML代码：

   <img id="slide_photo" src="images/pic2.jpg">

    

3. js代码：

   <script language =javascript >
   
   var i=0;//图片索引
   var arr=new Array();    //图片列表
   
   arr[0]="images/pic3.jpg";
   arr[1]="images/pic1.jpg";
   arr[2]="images/pic2.jpg";
   
   
   function slide_photos()
   {
       var photo=document.getElementById("slide_photo");
       if (i==arr.length-1) 
       {
           i=0;
       }
       else
       {
           i+=1;
       }
       photo.src=arr[i];    //直接定义图片
   }
   
   //重新加载的时间
   setInterval("slide_photos()",2000);
   
   </script>

   少侠留步！评论区写下您的方法，谢谢！