点击按钮,滚动图片[上下滚动]

作者：简简单单 2008-04-15

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=GBK">
<STYLE type=text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>>BODY {
	MARGIN: 0px; BACKGROUND-COLOR: #e1f7ff
}
A:link {
	FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 150%; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
A:visited {
	FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 150%; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
A:hover {
	FONT-SIZE: 12px; COLOR: #ff0000; LINE-HEIGHT: 150%; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
#dyp_cp1 ul li  IMG{border:0px
}
#outer{
  padding: 0px;
  margin: 0px;
  
  text-align: center
  }
#focus{
  border: #ccc 2px solid;
  margin: 0px;
  padding: 10px;
  background: url(/images/tile.gif) #eee repeat-y left top;
  
  position: relative;
  text-align: center
  }
#icefable1, #dyp_cp1 UL {
	FLOAT: left; MARGIN: 0px; }
#dyp_cp1 LI {
	PADDING: 0px;  FONT-SIZE: 12px; FLOAT: left;  COLOR: #000000; LIST-STYLE-TYPE: none; 
}
#icefable1{
  overflow:hidden;
  }
.dis{padding-top:20px
}
</STYLE>
<META content="MSHTML 6.00.2900.2912" name=GENERATOR></HEAD>
<BODY>
<div id=outer>
   <div id=focus>
<DIV id=icefable1>
<DIV id=dyp_cp1>
        <ul>        
          <li><a href="#"><img 
          src="rounded-12.gif"/></a><li><a href="#">
			<img 
          src="rounded.gif"/></a></li><li><a href="#">
			<img 
          src="rounded.gif"/></a></li><li><a href="#">
			<img 
          src="rounded.gif"/></a></li>
        </ul>
        <ul>        
          <li><a href="#"><img 
          src="rounded.gif"/></a></li><li><a href="#">
			<img 
          src="rounded.gif"/></a></li><li><a href="#">
			<img 
          src="rounded.gif"/></a></li><li><a href="#">
			<img 
          src="rounded-12.gif"/></a></li>
        </ul>
</DIV></DIV>
      <div class="dis">
          <a href="btn_up.jpg" class="js-smartPhoto" target="_blank"><img id="img_r" src="btn_up.jpg" alt="向上滚动" onClick="doSlide(1)" /></a><br><br><br>
          <a href="btn_down.jpg" class="js-smartPhoto" target="_blank"><img id="img_l" src="btn_down.jpg" alt="向下滚动" onClick="doSlide(-1)"/></a>
      </div>
</div>
</div>
<script>
document.getElementById("dyp_cp1").innerHTML+=document.getElementById("dyp_cp1").innerHTML;
var obj0=document.getElementById("dyp_cp1").getElementsByTagName("UL");
var h0=obj0[0].clientHeight;
  
var ss=1,t1,t2,t01,t02,n=1;
function doSlide(s){
clearTimeout(t01);
clearTimeout(t02);
ss=s;
//
if (s>0){t1=setInterval('scrollup()',1);}
else {t2=setInterval('scrolldown()',1);}
}
var obj=document.getElementById("icefable1");
function scrollup(){///alert(obj.scrollTop)
if (obj.scrollTop>=h0*(n-1)){
	obj.scrollTop=h0*(n-1);
	if (n>=(obj0.length-1)){n=1;obj.scrollTop=h0*(n-1);}
	clearInterval(t1);
	scrolling=0;n+=ss;
	//t01=setTimeout('doSlide('+ss+')',3000)
}
else{obj.scrollTop+=ss;}
}
function scrolldown(){//alert(n+"n"+obj.scrollTop)
	if (n<=1){n=obj0.length-1;obj.scrollTop=h0*(n-1);}else scrollTop=h0*n;
if (obj.scrollTop<=h0*(n-2)){
	obj.scrollTop=h0*(n-2);
	clearInterval(t2);
	scrolling=0;n+=ss;
	//t02=setTimeout('doSlide('+ss+')',3000)
}
else{obj.scrollTop+=ss;}
}
//setTimeout('doSlide('+ss+')',1000)
doSlide(ss)
</script>
</BODY></HTML>

提示：您可以先修改部分代码再运行

点击按钮,滚动图片[上下滚动]

相关文章

精彩推荐