導航:首頁 > 無縫鋼管 > 前端如何實現圖片橫向無縫滾動

前端如何實現圖片橫向無縫滾動

發布時間:2023-08-30 12:14:50

1. html圖片無縫滾動代碼怎麼寫

marquee和js兩種方法,我建議使用的,marquee兼容性不好,只兼容IE瀏覽器。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<metacharset="utf-8"/>
<TITLE>分別用marquee和div+js實現首尾相連循環滾動效果</TITLE>
</HEAD>
<BODY>
用marquee實現首尾相連循環滾動效果(僅IE):<br/><br/>
<MARQUEEbehavior="scroll"contenteditable="true"onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"scrollamount="3"width="100"><SPANunselectable="on"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"></SPAN></MARQUEE>
<br/><br/>用DIV+javascript實現首尾相連循環滾動效果(兼容firefox):<br/><br/>
<DIVid="scrollobj"style="white-space:nowrap;overflow:hidden;width:500px;"><span>這里是要滾動的內容</span></DIV>
<scriptlanguage="javascript"type="text/javascript">
<!--
functionscroll(obj){
vartmp=(obj.scrollLeft)++;
//當滾動條到達右邊頂端時
if(obj.scrollLeft==tmp)obj.innerHTML+=obj.innerHTML;
//當滾動條滾動了初始內容的寬度時滾動條回到最左端
if(obj.scrollLeft>=obj.firstChild.offsetWidth)obj.scrollLeft=0;
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
//-->
</script>
</BODY>
</HTML>

望採納!

2. 【HTML】如何實現無縫循環的圖片滾動效果

網站中,有時為了更好的利用有限的頁面空間展示更多的內容,也為了豐富網站頁面自身的表現樣式,我們往往會用到圖片滾動的效果。想要實現這種效果,只需要在想要顯示的表格或網頁中加入以下代碼即可實現: <div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0053_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0054_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0058_縮小大小.JPG" /> <img height="200" alt="" width="150" src="/lazysite/user_space/7788/CIMG0059_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0063_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0070_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0071_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0072_縮小大小.JPG" /> //這個圖片的地址可以是相對的也可以是絕對的 </td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>下面,我們就上面代碼的主要部分進行分析: <div id=demo style="overflow:hidden;height:100px;width:300px;"> 這段代碼中下劃線的部分表示我們這段滾動圖片所佔用區域的大小。用戶可根據頁面的實際需要進行調節。但一般情況下至少要大於或等於圖片的高度和寬度。 <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_縮小大小.JPG" /> 上面這段代碼是圖片的代碼。每加入一行如上代碼,那就會多出一個展示的圖片。圖片可以是一個,也可以是無數個。需要強調的是,每個圖片的高度和寬度應盡量的統一大小,主要顯示出來的效果才會更好看。 var speed=30 這行代碼是控制圖片滾動的速度。數字越小,滾動的也就越快;相反,數字越大,滾動的也就越慢。

3. js圖片無縫滾動的原理是什麼

不斷減少圖片距離外面容器的間距,然後在間距為0的剎那將圖片重新回到初始位置。為了版不至於看出權破綻,滾動圖片要弄雙份兒,比如你需要滾動的是AB,那麼在容器里放的就是ABAB。那個外面的容器還要設置大小,然後將超出的內容隱藏。

這是我當年自己分析某人的JS圖片滾動代碼時總結的。

現在嘛都直接整jquery的插件了

閱讀全文

與前端如何實現圖片橫向無縫滾動相關的資料

熱點內容
旋轉鋼板怎麼做的 瀏覽:749
重力澆注模具加熱多少度 瀏覽:336
注塑模具彈簧多少度 瀏覽:735
矩管理論重量表規格表方管 瀏覽:703
焊接鋼筋怎麼取樣 瀏覽:576
如何購買不銹鋼熱水杯 瀏覽:929
鋼構廠房電怎麼安裝 瀏覽:825
方管切角度機 瀏覽:724
鋼鐵物流什麼時候建 瀏覽:185
鋼支撐焊接多少錢一個 瀏覽:338
q345e鋼板用什麼樣的焊條 瀏覽:262
不銹鋼鍋的標簽怎麼去除 瀏覽:558
不銹鋼勺用什麼酸洗 瀏覽:789
鋁合金雨棚如何做 瀏覽:599
焊管高頻故障 瀏覽:453
不銹鋼鍋燒黑了怎麼辦擦亮6 瀏覽:62
25螺紋鋼一米長多少分量 瀏覽:459
第一次使用不銹鋼鍋怎麼處理 瀏覽:533
為什麼鋼鐵俠三在愛奇藝里只有預告 瀏覽:721
工地鋼管接頭多少一個 瀏覽:475