×

html图片循环滚动效果

用html制作四张向左无缝隙循环滚动的图片,怎么制作,希望步骤详细一?如何在HTML页面中实现图片,文字循环上下滚动

admin admin 发表于2022-06-11 10:47:27 浏览137 评论0

抢沙发发表评论

用html制作四张向左无缝隙循环滚动的图片,怎么制作,希望步骤详细一



《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

《/script》  

《!--以上为图片滚动--》

《/body》

《/html》

注意:图片可以自己找几张,粘贴的时候注意图片路劲


如何在HTML页面中实现图片,文字循环上下滚动


《DIV id=demo  style=“OVERFLOW: hidden; WIDTH: 600px; HEIGHT: 190px; top:485px; left:252px;position: absolute;“》
   《table border=“0“ cellspacing=“0“ cellpadding=“0“》
      《tr》
         《td valign=“top“  id=demo1》

            《!-- 要循环滚动的图片 --》
            《table width=“600“ border=“0“ align=“center“ cellpadding=“0“ cellspacing=“0“ 》
               《tr》
                  《td width=“200“ align=“center“ style=“height: 151px“》
                      《a href=“WebDeSign.aspx“》
                     《img src=“images/indexpic1.gif“ width=“194“ height=“147“ border=“0“ /》《/a》
                  《/td》
                  《td width=“200“ align=“center“ style=“height: 151px“》
                      《a href=“SoftWare.aspx“》
                     《img src=“images/indexpic2.gif“ width=“194“ height=“147“ border=“0“ /》《/a》
                  《/td》
                  《td align=“center“ style=“height: 151px; width: 200px;“》
                      《a href=“VhostIndex.aspx“》
                     《img src=“images/indexpic3.gif“ width=“194“ height=“147“ border=“0“ /》《/a》
                  《/td》
               《/tr》
            《/table》

         《/td》
         《TD id=demo2 width=1》《/TD》
      《/tr》
   《/table》
《/DIV》 

《SCRIPT》
   var speed=30//速度数值越大速度越慢
   var demo2 = document.getElementById(“demo2“);
   var demo = document.getElementById(“demo“);
   var demo1 = document.getElementById(“demo1“);
   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》

自己站的效果

-html图片循环滚动效果

html怎么实现图片滚动效果


《marquee direction=方向 loop=循环次数 behavior=滚动形式 dataformatas=文字类型 width=字符滚动窗口的宽度 height=字符滚动窗口的高度 scrolldelay=每次循环的间隔时间 scrollamount=每次移动的长度 bgcolor=滚动窗口的背景颜色 》

…………要滚动的文字…………

《/marquee》
-html图片循环滚动效果