<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!-- 全局声明-->
*{ margin:0 auto; padding:0;}
li{ list-style:none;}
img{ border:0;}
.btn_left{ width:78px; height:78px; background:url(images/btn.jpg) -68px -68px no-repeat; display:block; position:absolute; top:75px; left:20px; z-index:1;}
.btn_right{ width:78px; height:78px ; background:url(images/btn.jpg) 8px -68px no-repeat ; display:block; position:absolute; top:75px; right:20px; z-index:1;}
.btn_left:hover{ background:url(images/btn.jpg) -68px 8px no-repeat ;}
.btn_right:hover{ background:url(images/btn.jpg) 8px 8px no-repeat ; }
.sroll{ height:250px; border:1px solid rgb(204,204,204); width:1340px; position:relative;}
.wrap{ width:1120px; height:200px; position:relative; overflow:hidden; background:#eee; margin:0 auto; z-index:0; padding-right:35px; border:2px solid #000; margin-top:20px; }
.wrap ul{ position:absolute; left:0px;}
.wrap ul li{ float:left; text-align:center; padding-bottom:5px;}
.wrap ul li img{ width:250px; margin: 0 5px; padding:5px; background:rgb(153,153,153);}
.wrap ul li img:hover{ background:rgb(0,102,102);}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("sroll");
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oDiv.getElementsByTagName('li');
var aBtn = oDiv.getElementsByTagName('a');
var iSpeed=-3;
var timer='null'
oUl.innerHTML +=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
timer=setInterval(function (){
oUl.style.left=oUl.offsetLeft+iSpeed+"px";
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='-20px';
}
else if(oUl.offsetLeft=='-50px'){
oUl.style.left= -oUl.offsetWidth/2;
}
}, 30 );
aBtn[0].onclick = function(){
iSpeed=-3;
}
aBtn[1].onclick = function(){
iSpeed=3;
}
oUl.onmouseover = function(){
clearInterval(timer);
}
oUl.onmouseout = function(){
timer=setInterval(function (){
oUl.style.left=oUl.offsetLeft+iSpeed+"px";
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='-20px';
}
else if(oUl.offsetLeft>0){
oUl.style.left = oUl.offsetWidth/2;
}
}, 30 );
aBtn[0].onclick = function(){
iSpeed=-3;
}
aBtn[1].onclick = function(){
iSpeed=3;
}
}
}
</script>
</head>
<body>
<div id="sroll" class="sroll">
<a href="javascript:;" class="btn_left"></a>
<a href="javascript:;" class="btn_right"></a>
<div class="wrap">
<ul>
<li><a href="#" target="_blank" alt='ds' title="das"><img src="images/1.jpg" /></a></li>
<li><a href="#" target="_blank" alt='ds' title="das"><img src="images/2.jpg" /></a></li>
<li><a href="#" target="_blank" alt='ds' title="das"><img src="images/3.jpg" /></a></li>
<li><a href="#" target="_blank" alt='ds' title="das"><img src="images/4.jpg" /></a></li>
<li><a href="#" target="_blank" alt='ds' title="das"><img src="images/5.gif" /></a></li>
</ul>
</div>
</div>
</body>
</html>