左右滚动图片

css:

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
border: 1px solid blue;   
float: left;
}
#demo2 {
border: 1px solid red;   
float: left;
}
-->
</style>


html:

<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://codefans.net/jscss/demoimg/wall_s1.jpg" border="0" /></a>
<a href="#"><img src="http://codefans.net/jscss/demoimg/wall_s2.jpg" border="0" /></a>
<a href="#"><img src="http://codefans.net/jscss/demoimg/wall_s3.jpg" border="0" /></a>
<a href="#"><img src="http://codefans.net/jscss/demoimg/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="http://codefans.net/jscss/demoimg/wall_s5.jpg" border="0" /></a>
<a href="#"><img src="http://codefans.net/jscss/demoimg/wall_s6.jpg" border="0" /></a>
</div>
</div>
</div>
<input οnclick="Marquee();" type="button" id="moveLeft" value="<--">
<input οnclick="MarqueeRight();" type="button" id="moveLeft" value="-->">



js:

<script>
var speed=1000;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");

function Marquee(){
if (tab.scrollLeft + 100 <= tab1.offsetWidth - 500) {
    tab.scrollLeft = tab.scrollLeft + 100;
} else {
    tab.scrollLeft = tab1.offsetWidth - 500;
}
}

function MarqueeRight(){
    if (tab.scrollLeft - 100 >= 0) {
        tab.scrollLeft = tab.scrollLeft - 100;
    } else {
        tab.scrollLeft = 0;
    }   
}
</script>