注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

多图循环滚动JS代码1  

2014-02-25 14:52:33|  分类: GIF制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 
图片水平滚动+图片链接+鼠标指向停止

<!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>Js封闭匀速的横向图片滚动</title>
<style>
<!--
#film{ border:#39C 1px dashed}
#film a{ float:left; margin-right:3px; border:#CCC 3px solid;}
#film img{ border:none}
-->
</style>
<script type="text/javascript">
<!--
function Na(){
this.shw={
Id:0,Imgs:"",Links:"",aTarget:"_blank",bgColor:"#ffffff",Width:0,Height:0,imgWidth:"auto",imgHeight:"auto",moveSpeed:0,$:function(id){return document.getElementById(id);},
startMove:function(){
if(this.Id==0||this.Width==0||this.Height==0){alert("请检查参数是否设置完全!");return "";}
document.write("<div id=\"msg\"></div><div style=\"float:left;overflow:hidden;width:"+this.Width+"px;height:"+this.Height+"px;overflow:hidden;\" id=\""+this.Id+"\"><div style=\"float:left;width:800%;\"><div style=\"float:left;\" id=\"NaNaTemp\"></div><div style=\"float:left;\"  id=\"NaNaTemp2\"></div></div></div>");
var imgs=this.Imgs.split("@");
for(var i=0;i<imgs.length;i++){
this.$("NaNaTemp2").innerHTML+="<a href=\"#\"><img style=\"width:"+this.imgWidth+"px;height:"+this.imgHeight+"px\" src=\""+imgs[i]+"\" /></a>";
}
var links=this.Links.split("@");
var fCount=(imgs.length>links.length)?links.length:imgs.length;
for(var i=0;i<fCount;i++){
var o=this.$("NaNaTemp2").getElementsByTagName("a");
o[i].href=links[i];
o[i].target=this.aTarget;
}
var d1=this.$(this.Id);
var d2=this.$("NaNaTemp");
var d3=this.$("NaNaTemp2");
var speed=this.moveSpeed;
function moves(){
d2.innerHTML=d3.innerHTML;
if(d3.offsetWidth-d1.scrollLeft<=0){
d1.scrollLeft=d1.scrollLeft-d2.offsetWidth;
}
else{
d1.scrollLeft=d1.scrollLeft+1;
}
}
var MyMar=setInterval(moves,speed);
d1.onmouseover=function() {clearInterval(MyMar)};
d1.onmouseout=function() {MyMar=setInterval(moves,speed)};
}
//---------------------
}
}
-->
</script>
</head>
<body text="#99CC00">
<script>
var myNa=new Na();
myNa.shw.Id="film"; //必须为要生成的标签指定一个ID,同时也方便你在css样式表中设置样式
myNa.shw.bgColor="#000000";//背景颜色
myNa.shw.Width=600;//DIV的宽度
myNa.shw.Height=260; //DIV的高度
//myNa.shw.imgWidth=120; //图片的宽度
myNa.shw.imgHeight=250;//图片的高度
myNa.shw.moveSpeed=10;//滚动速度
myNa.shw.Links="#@#@http://i.56.com/u/xuhui8491@http://www.veryhuo.com@#@#";//图片链接地址,以@隔开
myNa.shw.Imgs="http://www.veryhuo.com/uploads/common/images/p1.jpg@http://www.veryhuo.com/uploads/common/images/p2.jpg@http://www.veryhuo.com/uploads/common/images/p3.jpg@http://www.veryhuo.com/uploads/common/images/p4.jpg@http://www.veryhuo.com/uploads/common/images/p5.jpg"; //图片地址,多个以@隔开
myNa.shw.startMove(); //启动播放
</script>
</body>
</html>

来源: 烈火网      测试:请将代码复制粘贴到“运行代码框”即可!

 

图片水平滚动+图片链接+鼠标指向停止
<div id="demon" style="overflow: hidden; width: 810px; background-color: #FFFFFF;">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td id="demon1" valign="top">
<table cellspacing="0" cellpadding="0" width="810" border="0">
<tr>
<td>
<a href="http://xuhui-8491.blog.163.com/" target="_blank">
<img src="http://www.veryhuo.com/uploads/allimg/081207/1750200_lit.jpg" width="160" height="106" class="tu" border="0" />
</a>
</td>
<td>
<a href="http://i.56.com/u/xuhui8491" target="_blank">
<img src="http://www.veryhuo.com/uploads/allimg/080919/1456250_lit.jpg" width="160" height="106" class="tu" border="0" />
</a>
</td>
<td>
<a href="http://blog.sina.com.cn/u/1361256227" target="_blank">
<img src="http://www.veryhuo.com/uploads/litimg/080719/21430926402.jpg" width="160" height="106" class="tu" border="0" />
</a>
</td>
<td>
<a href="http://www.tudou.com/home/xuhui8491/" target="_blank">
<img src="http://www.veryhuo.com/uploads/userup/0907/02114454Jb_lit.jpg" width="160" height="106" class="tu" border="0" />
</a>
</td>
<td>
<a href="http://i.youku.com/u/UNDUxMDQzNDY4" target="_blank">
<img src="http://www.veryhuo.com/uploads/allimg/080726/1925170_lit.jpg" width="160" height="106" class="tu" border="0" />
</a>
</td>
</tr>
</table>
</td>
<td id="demon2"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed1=30  //控制速度,数越多速度越慢
demon2.innerHTML=demon1.innerHTML
function Marquee()
{
if(demon.scrollLeft>=demon1.scrollWidth)
{ demon.scrollLeft=0 }
else{
demon.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed1)
demon.onmouseover=function() {clearInterval(MyMar)}
demon.onmouseout=function() {MyMar=setInterval(Marquee,speed1)}
</script>
来源: 烈火网        测试:请将代码复制粘贴到“运行代码框”即可!
 
 
图片水平滚动+图片链接+鼠标指向停止
<!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=gb2312" />
<title>图片滚动</title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="http://xuhui-8491.blog.163.com/"target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s1.jpg" border="0" /></a>
<a href="http://i.56.com/u/xuhui8491"target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s2.jpg" border="0" /></a>
<a href="http://blog.sina.com.cn/u/1361256227"target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" border="0" /></a>
<a href="http://www.tudou.com/home/xuhui8491/"target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s4.jpg" border="0" /></a>
<a href="http://i.youku.com/u/UNDUxMDQzNDY4"target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s5.jpg" border="0" /></a>
<a href="http://you.video.sina.com.cn/m/1361256227"target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" 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 Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>
 
来源: 源码爱好者        测试:请将代码复制粘贴到“运行代码框”即可!
 
 
图片水平滚动+图片链接+鼠标指向停止+文字  
<table width=700 border=0 cellpadding=0 cellspacing=0>
<tr><td> 
<div id=www_qpsh_com style=overflow:hidden;height:120px;width:700px;color:#ff0000><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=www_qpsh_com1 valign=top>
  <table border=0 cellpadding=0 cellspacing=0>
  <tr><td><a href=http://www.fankelipinka.com target=_blank><img border=0 src="http://www.qpsh.com/icon/BS9097.jpg" width=150 height=100 hspace=22></a><br><center><b>说明一</b></center></td>
  <td width=30></td>
  <td><a href=http://www.wangtx.com target=_blank><img border=0 src="http://www.qpsh.com/icon/BS9092.jpg" width=150 height=100  hspace=22></a><br><center><b>说明二</b></center></td></td>
  <td width=30></td>
  <td><a href=http://www.yamaxun.org target=_blank><img border=0 src="http://www.qpsh.com/icon/BS9084.jpg" width=150 height=100  hspace=22></a><br><center><b>说明三</b></center></td>
  <td><a href=http://www.cnwenger.com target=_blank><img border=0 src="http://www.qpsh.com/icon/BS9079.jpg" width=150 height=100  hspace=22></a><br><center><b>说明四</b></center></td>
  <td width=30></td>
  <td><a href=http://www.pc555.com target=_blank><img border=0 src="http://www.qpsh.com/icon/BS9070.jpg" width=150 height=100  hspace=22></a><br><center><b>说明五</b></center></td>
  </tr>
  </table>
 </td><td id=www_qpsh_com2 valign=top></td></tr></table></div>
<script>
  var speed=10 //速度数值越大速度越慢
  www_qpsh_com2.innerHTML=www_qpsh_com1.innerHTML
  function Marquee(){
  if(www_qpsh_com2.offsetWidth-www_qpsh_com.scrollLeft<=0)
  www_qpsh_com.scrollLeft-=www_qpsh_com1.offsetWidth
  else{
  www_qpsh_com.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  www_qpsh_com.onmouseover=function() {clearInterval(MyMar)}
  www_qpsh_com.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </script>
</td></tr>
</table>
来源:网页特效       测试:请将代码复制粘贴到“运行代码框”即可!
 
 
图片无间隔循环(水平)+鼠标指向停止
<div id="demo"style="OVERFLOW: hidden; WIDTH: 550px; HEIGHT: 90px">
<table cellpadding="0" width="735" align="center"border="0" cellspace="0">
<tbody>
<tr>
<td id="demo1" valign="top" width="735">
<table cellspacing="1" cellpadding="1"width="737"align="center" border="0">
<tbody>
<tr valign="center" align="middle">
<td width="143" height="62" align="center">
<table width="92" border="0" cellpadding="0" cellspacing="1" bgcolor="#E6E6E6">
<tr>
<td width="92"><img src="http://hostingd.imagecross.com/image-hosting-03/728701.jpg" width="140" height="90" border=0 />
</td></tr></table></td>
<td width="147" align="center">
<table width="92" border="0"cellpadding="0" cellspacing="1" bgcolor="#E6E6E6">
<tr>
<td width="92"><img  height=90 src="http://hostingd.imagecross.com/image-hosting-03/304702.jpg" width=140 border=0 />
</td></tr></table></td>
<td width="73" align="center">
<table width="92" border="0" cellpadding="0" cellspacing="1" bgcolor="#E6E6E6">
<tr>
<td width="92"><img src="http://hostingd.imagecross.com/image-hosting-03/373203.jpg" width="140" height="90" border="0" />
</td></tr></table></td>
<td width="74" align="center">
<table width="92" border="0" cellpadding="0" cellspacing="1" bgcolor="#E6E6E6">
<tr>
<td width="92"><img src="http://www.mftp.info/20140203/1392796818x1035949185.jpg" width="140" height="90" border="0" />
</td></tr></table></td>
</tr><tbody></table></td>
<td id="demo2" valign="top" width="131">
</td></tr></tbody></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>
来源:百度空间      测试:请将代码复制粘贴到“运行代码框”即可!
 
 图片无间隔循环(垂直)+图片链接+鼠标指向停止
<div id="rolllink"style="OVERFLOW: hidden; WIDTH: 390px; HEIGHT: 190px">
<div id="rolllink1">
<table width="92%" height="60"border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"valign="top"style="PADDING-LEFT: 1px; CURSOR: hand; LINE-HEIGHT: 20px; TEXT-DECORATION:underline"onclick="location.href='products.asp';">
<table width="390"border="0" align="center" cellpadding="0"cellspacing="0">
<tbody>
<tr>
<td width="140"><div align="center"><a href="http://xuhui-8491.blog.163.com/"><img height="76" src="http://www.mftp.info/20140203/1392796818x1035949185.jpg"width="111"border="0" /></a></div></td>
<td width="144"><div align="center"><font color="#333333"><a href="http://i.56.com/u/xuhui8491"><img height="76" src="http://www.mftp.info/20140203/1392796966x1035949185.jpg"width="111" border="0" /></a></font></div></td>
<td align="center"><a href="http://blog.sina.com.cn/u/1361256227"><img height="76"src="http://www.mftp.info/20140203/1392796991x1035949185.jpg"width="111" border="0" /></a></td>
</tr>
<tr>
<td width="140" height="28"><div align="center"><font color="#333333">卧房系列</font></div></td>
<td width="144" height="28"><div align="center"><font color="#333333">客厅系列</font></div></td>
<td width="144"><div align="center"><font color="#333333">儿童系列</font></div></td>
</tr>
<tr>
<td width="140"><div align="center"><a href="http://www.tudou.com/home/xuhui8491/"><img height="76" src="http://www.mftp.info/20140203/1392797017x1035949185.jpg"width="111"border="0" /></a></div></td>
<td width="144"><div align="center"><a href="http://i.youku.com/u/UNDUxMDQzNDY4"><img height="76" src="http://www.mftp.info/20140203/1392797037x1035949185.jpg"width="111"border="0" /></a></div></td>
<td width="144" align="center"><a href="http://you.video.sina.com.cn/m/1361256227"><img src="http://www.mftp.info/20140203/1392797061x1035949185.jpg" width="111" height="76"border="0" /></a></td>
</tr>
<tr>
<td width="140" height="16"><div align="center"><font color="#333333">餐厅系列</font></div></td>
<td width="144" height="16"><div align="center"><font color="#333333">书房系列</font></div></td>
<td width="144"><div align="center"><font color="#333333">配套系列</font></div></td>
</tr></tbody></table>
</td></tr></tbody></table></div>
<div id="rolllink2"></div>
</div>
<script>
var rollspeed=30
rolllink2.innerHTML=rolllink1.innerHTML
function Marquee(){
if(rolllink2.offsetTop-rolllink.scrollTop<=0)
rolllink.scrollTop-=rolllink1.offsetHeight
else{
rolllink.scrollTop++
}
}
var MyMar=setInterval(Marquee,rollspeed)
rolllink.onmouseover=function() {clearInterval(MyMar)}
rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}
</script>

来源:百度空间      测试:请将代码复制粘贴到“运行代码框”即可!

 返回GIF制作目录     返回JS代码目录 

  评论这张
 
阅读(771)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017