<!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>無標(biāo)題文檔</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>
求助大神 ；無縫滾動時 向右方向沒有進(jìn)行無縫
顏色不一樣的我
2016-10-05 21:26:40