打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
可放置于任何位置的JS图片无缝滚动代码
可放置于任何位置的JS图片无缝滚动代码
2009-06-02 19:36

网上有很多图片无缝滚动代码,这个可以很容易地修改方向和添加图片,关键地方我添加了文字注释。
几点说明:

1、为了个人使用方便,图片地址和链接地址已替换为文字,请自行添加
2、图片大小最好一致
3、纵向滚动时,如果想让图片排成单列,请把滚动区域宽度设成单张图片宽度(像素单位),两张以上为一行滚动时要让滚动区域宽度=单张图片宽度*图片数。

<script>//<!--代码开始-->
var speed = 15;<!--速度控制,数值越大速度越慢-->
var intAWidth = 825;<!--滚动区域宽度-->
var intAHeight = 250;<!--滚动区域高度-->
var direction = "left";<!--滚动方向-->
var collectScroll;
var tab;
var tab1;
var tab2;
var MyMar;
function autoScroll(){
this.items = [];
this.addItem = function(adURL,strURL,strBak,intTarget){
   var newItem   = {};
   newItem.adURL = adURL;
   newItem.strURL = strURL;
   newItem.strBak = strBak;
   newItem.intTarget = intTarget;
   this.items[this.items.length] = newItem;
}
this.play = function(){
   collectScroll = this.items
   scrollHtml()
   tab=document.getElementById("demo");
   tab1=document.getElementById("demo1");
   tab2=document.getElementById("demo2");
   tab2.innerHTML=tab1.innerHTML;
   MyMar=setInterval(Marquee,speed);
}
}
function scrollHtml(){
var imgHtml = ""
for(var i=0;i<collectScroll.length;i++){
   var a = collectScroll
   imgHtml += "<a href=\""+a.strURL+"\" target=\""+a.intTarget+"\"><img src=\""+a.adURL+"\" alt=\""+a.strBak+"\" border=\"0\" /></a>"
}
var b,c,d
if(direction == "left" || direction == "right"){
   b = "<div id=\"indemo\" style=\"float: left;width: 800%\">"
   c = " style=\"float: left\""
   d = "</div>"
}else{
   b = ""
   c = ""
   d = ""
}
document.writeln("<div id=\"demo\" onmouseover=\"clearInterval(MyMar)\" onmouseout=\"MyMar=setInterval(Marquee,speed)\" style=\"overflow:hidden; width:"+intAWidth+"px;height:"+intAHeight+"px\">")
document.writeln(b+"<div id=\"demo1\""+c+">")
document.writeln(imgHtml)
document.writeln("</div><div id=\"demo2\""+c+">"+d+"</div></div>")
}
function Marquee(){
if(direction == "top"){
   if(tab2.offsetTop-tab.scrollTop<=0){
tab.scrollTop-=tab1.offsetHeight
   }else{
tab.scrollTop++
   }
}else if(direction == "down"){
   if(tab1.offsetTop-tab.scrollTop>=0)
tab.scrollTop+=tab2.offsetHeight
   else{
tab.scrollTop--
   }
}else if(direction == "left"){
   if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
   else{
tab.scrollLeft++;
   }
}else if(direction == "right"){
   if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
   else{
tab.scrollLeft--
   }
}
}
var theAutoScroll= new autoScroll();
theAutoScroll.addItem("图片地址","链接地址","鼠标指向时文字说明","_blank")
theAutoScroll.addItem("图片地址","链接地址","鼠标指向时文字说明","_blank")
theAutoScroll.addItem("图片地址","链接地址","鼠标指向时文字说明","_blank")
theAutoScroll.addItem("图片地址","链接地址","鼠标指向时文字说明","_blank")
theAutoScroll.addItem("图片地址","链接地址","鼠标指向时文字说明","_blank")
theAutoScroll.addItem("图片地址","链接地址","鼠标指向时文字说明","_blank")
theAutoScroll.addItem("图片地址","链接地址","鼠标指向时文字说明","_blank")
theAutoScroll.addItem("图片地址","链接地址","鼠标指向时文字说明","_blank")
theAutoScroll.addItem("图片地址","链接地址","鼠标指向时文字说明","_blank")
theAutoScroll.addItem("图片地址","链接地址","鼠标指向时文字说明","_blank")
<!--此处可以继续添加图片-->
theAutoScroll.play()
</Script><!--代码结束-->

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
页面两侧对联广告代码效果
如何制作自己的QQ空间主页,
教你做个漂亮的空间
图片必须要文字说明吗?
教你怎么做空间,从最基本最简单的开始。
教你一步步做视频
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服