js two methods to realize web page image scrolling and one switching method

The first is to use js's window.onload()
to set up a few image paths by yourself.

<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>

Set the image 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 function

<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>

But the above method can only run an image loop in an html

The second
is to take a few pictures first

<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 set the level

#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 code

<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>

The above are all moving and switching, here is
another method of switching

<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>

js two methods to realize web page image scrolling and one switching method

Guess you like