第一种用js的window.onload()
先随便来几个图片 路径自己设一下
<div id="box" style="margin-top:0px;">
<ul>
<li><img src="../img/1.jpg" width="340" height="210"></li>
<li><img src="../img/2.jpg" width="340" height="210"></li>
<li><img src="../img/3.jpg" width="340" height="210"></li>
<li><img src="../img/4.jpg" width="340" height="210"></li>
</ul>
</div>
设置一下图片style
<style>
*{ margin:0; padding:0; list-style:none;}
#box{ width:250px; border:1px solid #fff; height:180px; margin:30px auto; position:relative; overflow:hidden;}
#box ul{ position:absolute; left:0; top:0;}
#box ul li{ width:340px; height:200px; float:left; padding:5px;}
</style>
js函数
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=oBox.children[0];
var aLi=oUl.children;
//复制一份内容 ,制作出无缝的效果
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
setInterval(function(){ //开定时器,这样就可以自己切换,无需人工干预。
var l=oUl.offsetLeft-1; //图片切换,就是移动距离
if(l<=-oUl.offsetWidth/2){
l=0;
}
oUl.style.left=l+'px';
},30);
};
</script>
但是上述方法只能在一个html里运行一个图片循环
第二种
还是先来几张图片
<div id="demo0">
<div id="indemo0">
<div id="demo10">
<a href="#"><img src="../img/chengguo1.png" width="250" height="170" border="0" /></a>
<a href="#"><img src="../img/chengguo2.png" width="250" height="170" border="0" /></a>
<a href="#"><img src="../img/chengguo3.jpg" width="250" height="170" border="0" /></a>
<a href="#"><img src="../img/chengguo4.png" width="250" height="170" border="0" /></a>
</div>
<div id="demo20"></div>
</div>
</div>
</div>
css设置一下水平
#demo0 {
width:970px;
height:134px;
overflow:hidden;
margin:auto;
}
#demo0 img {
float:left;
margin-left:10px;
border:3px #ffffff solid;
}
#indemo0 {
float: left;
width: 800%;
}
#demo10 {
float: left;
}
#demo20 {
float: left;
}
js代码
<script language="javascript">
<!--
var speed0=40; //数字越大速度越慢
var tabb=document.getElementById("demo0");
var tabb1=document.getElementById("demo10");
var tabb2=document.getElementById("demo20");
tabb2.innerHTML=tabb1.innerHTML+tabb1.innerHTML;
function Marquee2(){
if(tabb2.offsetWidth-tabb.scrollLeft<=0)
tabb.scrollLeft-=tabb1.offsetWidth;
else{
tabb.scrollLeft++;
}
}
var MyMar2=setInterval(Marquee2,speed0);
tabb.onmouseover=function(){clearInterval(MyMar2)};
tabb.onmouseout=function(){MyMar2=setInterval(Marquee2,speed0)};
-->
</script>
上面都是动着切换的
再来个切换的方法
<html>
<head>
<script language="javascript">
var interval = 2; //delay between roating images(in seconds)
var random_display = 1;
interval *= 500;
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("IMG_5370.JPG");
image_list[image_index++] = new imageItem("IMG_5371.JPG");
image_list[image_index++] = new imageItem("IMG_5372.JPG");
image_list[image_index++] = new imageItem("IMG_5374.JPG");
var number_of_image = image_list.length;
function imageItem(image_location)
{
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj)
{
return(imageObj.image_item.src)
}
function generate(x,y)
{
var range = y - x + 1;
return Math.floor(Math.random()*range) + x;
}
function getNextImage()
{
if(random_display)
{
image_index = generate(0,number_of_image-1);
}
else
{
image_index = (image_index + 1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place)
{
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call,interval);
}
</script>
</head>
</html>