精品主页 | 软件下载 | 系统下载 | 精品导航| 精彩图片 | 转帖工具 | 版主申请 | 影视下载
发新话题
打印

图片连续循环滚动代码

图片连续循环滚动代码

图片连续循环滚动代码(向上、下、左、右) 向上:
<base

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">

<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向下:
<base

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">

<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>

<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向左:
<base

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img

src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img

src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向右:
<base

href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img

src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img

src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>


<html>
<body>

</body>
</html>

TOP

图片滚动代码(大全)2007-12-21 23:17左右滚动

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 450px; HEIGHT: 300px;">
<TABLE cellSpacing=0 cellPadding=0 border=0>

<TBODY>
<TR>
<TD id=demo1>
<TABLE cellPadding=5 cellSpacing=0>
<TBODY>
<TR>
<TD vAlign=center align=middle><img src="1.gif" width="330" height="260"></TD>
<TD vAlign=center align=middle><A href="#">??1</A></TD>
<TD vAlign=center align=middle><img src="2.gif" width="330" height="260"></TD>
<TD vAlign=center align=middle><A href="#">??2</A></TD>
<TD vAlign=center align=middle><img src="3.gif" width="330" height="260"></TD>
<TD vAlign=center align=middle><A href="#">??3</A></TD>
<TD vAlign=center align=middle><img src="4.gif" width="330" height="260"></TD>
<TD vAlign=center align=middle><A href="#">??4</A></TD>
<TD vAlign=center align=middle><img src="5.gif" width="330" height="260"></TD>
<TD vAlign=center align=middle><A href="#">??5</A></TD>
</TR></TBODY></TABLE></TD>
<TD id=demo2></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed=20
var MyMar
var demo1=document.all.demo1
var demo=document.all.demo
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}

}

demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}

window.onload = function(){
if(demo.offsetWidth < demo1.offsetWidth){
demo2.innerHTML=demo1.innerHTML
MyMar=setInterval(Marquee,speed)
}
}
</SCRIPT>

上下滚动演示地址:jsad-code-for-scroll-213/index.htm

marqueesHeight=60;
stopscroll=false;
with(makewing){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preTop=0; currentTop=marqueesHeight; stoptime=0;
makewing.innerHTML+=makewing.innerHTML;


function init_srolltext(){
makewing.scrollTop=0;
setInterval("scrollUp()",1);
}init_srolltext();

function scrollUp(){
if(stopscroll==true) return;
currentTop+=1;
if(currentTop==marqueesHeight+1)
{
stoptime+=1;
currentTop-=1;
if(stoptime==300)
{
currentTop=0;
stoptime=0;
}
}
else {
preTop=makewing.scrollTop;
makewing.scrollTop+=1;
if(preTop==makewing.scrollTop){
makewing.scrollTop=marqueesHeight;
makewing.scrollTop+=1;

}
}

}
init_srolltext();

上下

<DIV   id=marquees>  
                                                  <table   width="135"   border="1" height="95" style="border-width: 0px">  
                                                      <tr>  
                                                          <td style="border-style: none; border-width: medium">这里为需要滚动的图片</td>  
                                                      </tr>  
                                                  </table>  
                                              </DIV>  
                                      <SCRIPT>  
   
marqueesHeight=870;  
stopscroll=false;  
with(marquees){  
noWrap=true;  
style.width=0;  
style.height=marqueesHeight;  
style.overflowY="hidden";  
   
onmouseover=new   Function("stopscroll=true");  
onmouseout=new   Function("stopscroll=false");  
}  
document.write('<div   id="templayer"   style="position:absolute;z-index:1;visibility:hidden"></div>');  
   
function   init(){  
while(templayer.offsetHeight<marqueesHeight){  
templayer.innerHTML+=marquees.innerHTML;  
}  
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;  
setInterval("scrollUp()",10);   //注:这里为滚动的速度 数字越大滚动越慢
}  
document.body.onload=init;  
   
preTop=0;  
   
function   scrollUp(){  
if(stopscroll==true)   return;  
preTop=marquees.scrollTop;  
marquees.scrollTop+=1;  
   
if(preTop==marquees.scrollTop){  
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;  
}  
}  
-->  
</SCRIPT>

TOP

发新话题