<style type="text/css">
<!--
.leftArrow{
margin:55px 8px 0 0;
float:left;
clear:left;
border:0px;
cursor:pointer;
}
.rightArrow{
margin:55px 0;
float:right;
clear:right;
border:0px;
cursor:pointer;
}
#demo {
overflow:hidden;
width: 550px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<a class="leftArrow"><img src="images/left.gif"/></a>
<a class="rightArrow"><img src="images/right.gif"/></a>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/scrollImg1.gif" border="0" /></a>
<a href="#"><img src="images/scrollImg2.gif" border="0" /></a>
<a href="#"><img src="images/scrollImg3.gif" border="0" /></a>
<a href="#"><img src="images/scrollImg4.gif" border="0" /></a>
<a href="#"><img src="images/scrollImg5.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function MarqueeR(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--
}
}
function MarqueeL(){
if(tab.scrollLeft>=tab1.scrollWidth){
tab.scrollLeft=0
}else{
tab.scrollLeft++
}
}
var MyMarL;
var MyMarR;
tab.οnmοuseοver=function() {clearInterval(MyMarL);clearInterval(MyMarR);};
tab.οnmοuseleave=function(){
if(MyMarL<MyMarR || MyMarL==undefined){
MyMarR=setInterval(MarqueeR,speed);
}
else{
MyMarL=setInterval(MarqueeL,speed);
}
};
$('.rightArrow').click(function(){
if(MyMarR==undefined || MyMarL>MyMarR){
clearInterval(MyMarL);
MyMarR=setInterval(MarqueeR,speed);}
});
$('.leftArrow').click(function(){
if(MyMarL==undefined || MyMarR>MyMarL){
clearInterval(MyMarR);
MyMarL=setInterval(MarqueeL,speed);}
});
-->
</script>