一款不错的图片自动向上翻滚的代码

最新推荐文章于 2021-12-22 17:33:17 发布
最新推荐文章于 2021-12-22 17:33:17 发布
阅读量2.5k 收藏
点赞数
分类专栏： JavaScript 文章标签： class function timer stylesheet string float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_h_t/article/details/4839329
版权

 HTML代码：


<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片自动向上翻滚</title>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="MSClass.js"></script>
<SCRIPT defer>
 var scWidth = screen.width;
  if(scWidth<1280)
 { 
  new Marquee("marqueediv1",0,20,519,175,20,4000,100,195);
 }
 else
 {
  new Marquee("marqueediv1",0,20,759,175,20,4000,100,195);
 }
</SCRIPT>
</head>

<body>
<DIV id=marqueediv1>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px" alt="黄金被 黄金火灸被 黄金热灸被"
src="pics/846_thumb_G_12564863921374.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">黄金被 黄金火灸被 黄金热灸被</P><FONT
class=fc7 style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥298元 </FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px" alt="冰雪儿冰肌白乳液  祛除晒印 一次全身白个透"
src="pics/178_thumb_G_12516050371809.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">冰雪儿冰肌白乳液 祛除晒印 一次全身白个透</P><FONT
class=fc7 style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥168元 </FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px" alt="一分钟速算 6VCD 附赠2本学习手册 周根项著名速算大师"
src="pics/303_thumb_G_12516564933819.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">一分钟速算 6VCD 附赠2本学习手册
周根项著名速算大师</P><FONT class=fc7
style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥388元 </FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px" alt="太空1号高瘦鞋 太空一号高瘦鞋 高瘦鞋 太空1号瘦身鞋"
src="pics/644_thumb_G_12532789665623.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">太空1号高瘦鞋 太空一号高瘦鞋 高瘦鞋
太空1号瘦身鞋</P><FONT class=fc7 style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥398元
</FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px" alt="筑本T8全能魔链 第十一全运会官方指定产品"
src="pics/172_thumb_G_12516005800970.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">筑本T8全能魔链 第十一全运会官方指定产品</P><FONT
class=fc7 style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥198元 </FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px"
alt="富士通/Fujitsu U2010/全新现货/联保行货/超强配置/迷你UMPC之王"
src="pics/525_thumb_G_12519059878282.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">富士通/Fujitsu
U2010/全新现货/联保行货/超强配置/迷你U...</P><FONT class=fc7
style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥7799元 </FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px"
alt="德国进口★WMF/福腾宝★diadem plus 3件套汤锅 炖/煎/煮★特价！"
src="pics/297_thumb_G_12516548712302.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">德国进口★WMF/福腾宝★diadem plus 3件套汤锅
炖/煎/煮...</P><FONT class=fc7
style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥1482元 </FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px" alt="世界顶级 德国百乐顺 PICK UP超经典巧克力夹心脆饼 极品美味"
src="pics/341_thumb_G_12516616989339.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">世界顶级 德国百乐顺 PICK UP超经典巧克力夹心脆饼
极品美味</P><FONT class=fc7 style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥46元
</FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px" alt="★专柜正品★路易威登/LV 经典老花 单肩包★畅销款"
src="pics/254_thumb_G_12516517963706.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">★专柜正品★路易威登/LV 经典老花
单肩包★畅销款</P><FONT class=fc7 style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥8873元
</FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px"
alt="德国进口★WMF/福腾宝 28cm 不锈钢平底锅 不沾锅 煎锅★Fry Pan"
src="pics/216_thumb_G_12516314640598.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">德国进口★WMF/福腾宝 28cm 不锈钢平底锅 不沾锅 煎锅★Fry
...</P><FONT class=fc7 style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥562元
</FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px" alt="方明战痘套装(祛脂养颜洁面乳 方明痘必尽 祛痘养颜精华乳)"
src="pics/164_thumb_G_12515424894107.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">方明战痘套装(祛脂养颜洁面乳 方明痘必尽
祛痘养颜精华乳)</P><FONT class=fc7 style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥168元
</FONT></DIV>
<DIV class=goodsItem><IMG
style="WIDTH: 128px; HEIGHT: 128px" alt="英国原装 Joseph Joseph 长方形蔬果拼图菜板 耐摔玻璃"
src="pics/181_thumb_G_12516312023365.jpg"><BR>
<P style="OVERFLOW: hidden; HEIGHT: 20px">英国原装 Joseph Joseph 长方形蔬果拼图菜板
耐摔玻璃</P><FONT class=fc7 style="FONT-WEIGHT: bold; FONT-SIZE: 14px">￥281元
</FONT></DIV></DIV>

</body>

 

 

ＪＳ代码：

 


function Marquee()
{
 this.ID = document.getElementById(arguments[0]);
 if(!this.ID)
 {
  alert("您要设置的/"" + arguments[0] + "/"初始化错误/r/n请检查标签ID设置是否正确!");
  this.ID = -1;
  return;
 }
 this.Direction = this.Width = this.Height = this.DelayTime = this.WaitTime = this.CTL = this.StartID = this.Stop = this.MouseOver = 0;
 this.Step = 1;
 this.Timer = 30;
 this.DirectionArray = {"top":0 , "up":0 , "bottom":1 , "down":1 , "left":2 , "right":3};
 if(typeof arguments[1] == "number" || typeof arguments[1] == "string")this.Direction = arguments[1];
 if(typeof arguments[2] == "number")this.Step = arguments[2];
 if(typeof arguments[3] == "number")this.Width = arguments[3];
 if(typeof arguments[4] == "number")this.Height = arguments[4];
 if(typeof arguments[5] == "number")this.Timer = arguments[5];
 if(typeof arguments[6] == "number")this.DelayTime = arguments[6];
 if(typeof arguments[7] == "number")this.WaitTime = arguments[7];
 if(typeof arguments[8] == "number")this.ScrollStep = arguments[8];
 this.ID.style.overflow = this.ID.style.overflowX = this.ID.style.overflowY = "hidden";
 this.ID.noWrap = true;
 this.IsNotOpera = (navigator.userAgent.toLowerCase().indexOf("opera") == -1);
 if(arguments.length >= 7)this.Start();
}

Marquee.prototype.Start = function()
{
 if(this.ID == -1)return;
 if(this.WaitTime < 800)this.WaitTime = 800;
 if(this.Timer < 20)this.Timer = 20;
 if(this.Width == 0)this.Width = parseInt(this.ID.style.width);
 if(this.Height == 0)this.Height = parseInt(this.ID.style.height);
 if(typeof this.Direction == "string")this.Direction = this.DirectionArray[this.Direction.toString().toLowerCase()];
 this.HalfWidth = Math.round(this.Width / 2);
 this.HalfHeight = Math.round(this.Height / 2);
 this.BakStep = this.Step;
 this.ID.style.width = this.Width + "px";
 this.ID.style.height = this.Height + "px";
 if(typeof this.ScrollStep != "number")this.ScrollStep = this.Direction > 1 ? this.Width : this.Height;
 var templateLeft = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;display:inline;'><tr><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td></tr></table>";
 var templateTop = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;'><tr><td>MSCLASS_TEMP_HTML</td></tr><tr><td>MSCLASS_TEMP_HTML</td></tr></table>";
 var msobj = this;
 msobj.tempHTML = msobj.ID.innerHTML;
 if(msobj.Direction <= 1)
 {
  msobj.ID.innerHTML = templateTop.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML);
 }
 else
 {
  if(msobj.ScrollStep == 0 && msobj.DelayTime == 0)
  {
   msobj.ID.innerHTML += msobj.ID.innerHTML;
  }
  else
  {
   msobj.ID.innerHTML = templateLeft.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML);
  }
 }
 var timer = this.Timer;
 var delaytime = this.DelayTime;
 var waittime = this.WaitTime;
 msobj.StartID = function(){msobj.Scroll()}
 msobj.Continue = function()
    {
     if(msobj.MouseOver == 1)
     {
      setTimeout(msobj.Continue,delaytime);
     }
     else
     { clearInterval(msobj.TimerID);
      msobj.CTL = msobj.Stop = 0;
      msobj.TimerID = setInterval(msobj.StartID,timer);
     }
    }

 msobj.Pause = function()
   {
    msobj.Stop = 1;
    clearInterval(msobj.TimerID);
    setTimeout(msobj.Continue,delaytime);
   }

 msobj.Begin = function()
  {
   msobj.ClientScroll = msobj.Direction > 1 ? msobj.ID.scrollWidth / 2 : msobj.ID.scrollHeight / 2;
   if((msobj.Direction <= 1 && msobj.ClientScroll <= msobj.Height + msobj.Step) || (msobj.Direction > 1 && msobj.ClientScroll <= msobj.Width + msobj.Step))   {
    msobj.ID.innerHTML = msobj.tempHTML;
    delete(msobj.tempHTML);
    return;
   }
   delete(msobj.tempHTML);
   msobj.TimerID = setInterval(msobj.StartID,timer);
   if(msobj.ScrollStep < 0)return;
   msobj.ID.onmousemove = function(event)
      {
       if(msobj.ScrollStep == 0 && msobj.Direction > 1)
       {
        var event = event || window.event;
        if(window.event)
        {
         if(msobj.IsNotOpera)
         {
          msobj.EventLeft = event.srcElement.id == msobj.ID.id ? event.offsetX - msobj.ID.scrollLeft : event.srcElement.offsetLeft - msobj.ID.scrollLeft + event.offsetX;
         }
         else
         {
          msobj.ScrollStep = null;
          return;
         }
        }
        else
        {
         msobj.EventLeft = event.layerX - msobj.ID.scrollLeft;
        }
        msobj.Direction = msobj.EventLeft > msobj.HalfWidth ? 3 : 2;
        msobj.AbsCenter = Math.abs(msobj.HalfWidth - msobj.EventLeft);
        msobj.Step = Math.round(msobj.AbsCenter * (msobj.BakStep*2) / msobj.HalfWidth);
       }
      }
   msobj.ID.onmouseover = function()
      {
       if(msobj.ScrollStep == 0)return;
       msobj.MouseOver = 1;
       clearInterval(msobj.TimerID);
      }
   msobj.ID.onmouseout = function()
      {
       if(msobj.ScrollStep == 0)
       {
        if(msobj.Step == 0)msobj.Step = 1;
        return;
       }
       msobj.MouseOver = 0;
       if(msobj.Stop == 0)
       {
        clearInterval(msobj.TimerID);
        msobj.TimerID = setInterval(msobj.StartID,timer);
       }
      }
  }
 setTimeout(msobj.Begin,waittime);
}

Marquee.prototype.Scroll = function()
{
 switch(this.Direction)
 {
  case 0:
   this.CTL += this.Step;
   if(this.CTL >= this.ScrollStep && this.DelayTime > 0)
   {
    this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL;
    this.Pause();
    return;
   }
   else
   {
    if(this.ID.scrollTop >= this.ClientScroll)
    {
     this.ID.scrollTop -= this.ClientScroll;
    }
    this.ID.scrollTop += this.Step;
   }
  break;

  case 1:
   this.CTL += this.Step;
   if(this.CTL >= this.ScrollStep && this.DelayTime > 0)
   {
    this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL;
    this.Pause();
    return;
   }
   else
   {
    if(this.ID.scrollTop <= 0)
    {
     this.ID.scrollTop += this.ClientScroll;
    }
    this.ID.scrollTop -= this.Step;
   }
  break;

  case 2:
   this.CTL += this.Step;
   if(this.CTL >= this.ScrollStep && this.DelayTime > 0)
   {
    this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL;
    this.Pause();
    return;
   }
   else
   {
    if(this.ID.scrollLeft >= this.ClientScroll)
    {
     this.ID.scrollLeft -= this.ClientScroll;
    }
    this.ID.scrollLeft += this.Step;
   }
  break;

  case 3:
   this.CTL += this.Step;
   if(this.CTL >= this.ScrollStep && this.DelayTime > 0)
   {
    this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL;
    this.Pause();
    return;
   }
   else
   {
    if(this.ID.scrollLeft <= 0)
    {
     this.ID.scrollLeft += this.ClientScroll;
    }
    this.ID.scrollLeft -= this.Step;
   }
  break;
 }
}

 

ｃｓｓ代码：

 

#marqueediv1 {
 FLOAT: left; OVERFLOW: hidden; WIDTH: 759px; POSITION: relative
}
.goodsItem {
 DISPLAY: inline; FLOAT: left; MARGIN: 0px 10px; OVERFLOW: hidden; WIDTH: 169px; PADDING-TOP: 10px; POSITION: relative; HEIGHT: 185px; TEXT-ALIGN: center
}
.goodsItem SPAN {
 LEFT: 0px; WIDTH: 40px; POSITION: absolute; TOP: 0px; HEIGHT: 40px
}
.goodsItem SPAN.best {
 BACKGROUND: url(images/bg.gif) no-repeat 0px -304px
}
.goodsItem SPAN.news {
 BACKGROUND: url(images/bg.gif) no-repeat -75px -304px
}
.goodsItem SPAN.hot {
 BACKGROUND: url(images/bg.gif) no-repeat -161px -304px
}

xuxubaby
关注
专栏目录
JQuery 图片不断向上翻滚代码
06-01
JS实现不断向上翻滚代码，翻滚内容支持图文并茂，效果很不错.
图片上下左右不间断滚动代码
09-08
网页中图片的不间断上下左右滚动，下载下来改成HTML文件，插入网页内部，把图片改成自己的就行了
翻滚图片代码
zhiduoxing的专栏
01-21 1720
前台代码--这是五张图片     imgUrl1="";imgtext1="";imgLink1=escape("");imgUrl2="";imgtext2="";imgLink2=escape("");imgUrl3="";imgtext3="";imgLink3=escape("");imgUrl4="";imgtext4="";imgLink4=escape("");imgUr
图片滚动代码
珍惜所有的一切
11-18 2631
图片滚动代码 (从右向左滚动)          图片滚动代码 (从下往上滚动)             改版： SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle>     说明： 1.directio
无缝隙图片向上滚动JS代码下载
11-16
【标题】"无缝隙图片向上滚动JS代码下载"所涉及的知识点主要集中在JavaScript（JS）编程语言上，尤其是关于图片滚动效果的实现。在网页设计和开发中，为了增加视觉吸引力和用户体验，常会使用JavaScript来创建动态...
JS实现div内部的文字或图片自动循环滚动代码
10-27
在本示例中，我们将详细探讨如何使用JS来实现div内部的文字或图片的自动循环滚动。 首先，我们创建了一个CSS样式，定义了两个类：`.content` 和 `dl`。`.content` 是包含滚动内容的div，设置了宽度、高度、位置以及...
超级经典一套鼠标控制左右滚动图片带自动翻滚
09-06
为了实现自动翻滚，可能有一个定时器（如`setInterval`）来定期调用滚动函数，使图片自动平滑滚动。 总的来说，这个“鼠标控制左右滚动图片带自动翻滚”的效果涉及到HTML布局、CSS样式以及JavaScript事件监听和DOM...
jquery上下左右图片无缝滚动代码
04-07
"jquery上下左右图片无缝滚动代码"是一个基于jQuery的插件，主要用于创建图片滚动展示的效果，尤其适用于产品展示或者新闻更新等场景。 这个插件允许图片在页面上实现上下或左右的平滑滚动，给用户带来连续、无断裂...
图片向上滚动插件
10-20
图片向上滚动插件应该能够根据屏幕尺寸自动调整图片的大小和滚动速度，保证在任何设备上都能呈现出良好的视觉效果。 9. **事件监听**：为了实现更丰富的交互，插件可能会提供事件监听功能，如开始滚动、停止滚动、...
图片之间的自动向上翻滚同时配上触摸动作
J_W_Xie
05-11 756
最近一个微信开发的项目需要实现一个功能，三张图片的自动向上翻滚显示，同时还要配上手指的向上触摸动作；在我看来难点在于，定时器启动之后手指的触摸动作位于哪一张，然后得做判断在继续执行定时器；我是使用参数来判断的；然后三张图片都显示完后就要展示一个玩法页面，然后再是上传照片页面，这边我就没有贴出来，直接显示主kv了； 下面先贴上html结构，三张图片我都是使用背景来做的，为的是更好的适应各种手机屏，
自动向上滚动，轮播，无限滚动
BigBanana的博客
10-14 746
js实现列表自动向上滚动 原理：控制dom的margin-top /** * javascript原生自动滚动 * @param domId 需要实现这个效果的domId * @param height 行高 * @param speed 滚动速度 * @param delay 间隔多久滚动一行 */ auroRiseScrolling(domId, height, speed = 0, delay = 1000) { let stop = false; // 暂停滚动 let
html5图片向上滚动代码,图片上下滚动代码使用方法
weixin_32001071的博客
06-09 1488
图片上下滚动源代码：var speed=60demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2function Marquee(){//当滚动至demo1与demo2交界时if(demo2.offsetTop-demo.scrollTop<=0)demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端 我觉得这...
html实现图片自动滚动效果,js实现图片左右滚动效果
weixin_31830691的博客
05-30 1766
需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。前提条件：美工把静态页面写好HTML代码：@using Models;@{List teacherList = ViewData["teacherList"] as List; //春雨树频道PagerModel pager = ViewData["pager"] as PagerModel;}教师团队...
js图片文字上下自动滚动
翟浩浩Android专栏
10-25 713
源码下载：
图片上下滚动特效
小麦先生
05-02 1006
href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">                                    var speed=30  demo2.innerHTML=demo1.innerHTML
定时翻滚的HTML代码
huangyiyun的专栏
02-06 1246
定时滚动代码              LINE-HEIGHT及HEIGHT用于控制每次翻滚所显示的行数aaaaaaaaabbbbbbbbb ccccccccc dddddddddfunction startmarquee(lh,speed,delay,index){var t;var p=false;var o=document.getElementById("marqueebox"+i
html页面实现图片滚动
热门推荐
qq_44124672的博客
12-14 2万+
html页面实现图片滚动 css代码 * { margin: 0px;/*设置一个元素所有外边距的宽度*/ padding: 0px;/*设置元素所有内边距的宽度*/ text-align: center;/*规定元素中的文本的水平对齐方式。*/ } #banner { width: 62.5%; height: 50%; marg
使用HTML实现网页滚动图片
xieailei的博客
12-22 6495
代码如下： <div id="colee_left" style="overflow: hidden; width: 1920px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="colee_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0">
HTML图片滚动效果实现代码示例
“Html网页图片滚动代码，用于创建一个在网页上自动滚动的图片展示效果。” 在HTML网页设计中，图片滚动代码是一种常见的视觉效果，它可以让多张图片在一个固定区域里循环滚动展示，以吸引用户的注意力。这个代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值