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

一、

思路是先定义一个图片显示块div，
在块内定义图片列表以float：left横排；
改变图片列表的位置以显示不同的图片；
HTML代码如下：
文章图片文章图片文章图片
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; }
【HTML页面；js动态切换图片（2种方法。。。持续更新。。。）】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代码放在标签中，或者外联

二、

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