可以放在任何位置的图片无缝滚动js代码

最新推荐文章于 2025-06-24 14:40:07 发布

Leson_Yin

最新推荐文章于 2025-06-24 14:40:07 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

分类专栏： RIA 文章标签： ASP JavaScript C C++ C# ViewUI

本文链接：https://blog.youkuaiyun.com/ileson/article/details/83811533

RIA 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页内容自动滚动的方法。通过定义滚动方向、速度等参数，可以使网页中的图片或文字等内容实现向上、向下、向左或向右的自动滚动效果。适用于创建动态的网页广告栏或信息展示区。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
//<!--代码开始-->
var speed = 10;<!--速度控制，数值越大速度越慢-->
var intAWidth = 530;<!--滚动区域宽度-->
var intAHeight = 80;<!--滚动区域高度-->
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[i];/*这个地方有些网站上贴的代码少了【i】 */
   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("img/yjqx.jpg","qiangxian.asp","维修抢险","_blank");// img/yjqx.jpg
theAutoScroll.addItem("img/sqwd1.jpg","shouqiwangdian.asp","售气网点","_blank");
theAutoScroll.addItem("img/pegc1.jpg","pepipe.asp","PE管材","_blank");
theAutoScroll.addItem("img/rqj.jpg","ranqiju.asp","燃具经营","_blank");
<!--此处可以继续添加图片-->
theAutoScroll.play();
<!--代码结束-->
</script>