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

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

發布時間: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的插件了

閱讀全文

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

熱點內容
25的鋼筋34d怎麼計算 瀏覽:85
鋁合金切料怎麼切 瀏覽:438
1500X6000X2鋼板多少錢 瀏覽:413
帶模具烤麵包需多長時間多少溫度 瀏覽:308
鋼筋鏈接容量怎麼寫 瀏覽:152
鋅合金工具跟洛釩鋼有什麼區別 瀏覽:725
安康哪裡有賣不銹鋼置物架的 瀏覽:451
太鋅合金大門怎麼樣 瀏覽:612
1820厚壁螺旋焊管多重 瀏覽:825
餐刀一般用什麼鋼材 瀏覽:257
鋼鐵俠飛行速度多少 瀏覽:237
鋼鐵俠最強裝甲叫什麼區別 瀏覽:199
什麼軟體畫橋梁鋼筋最好 瀏覽:189
泛黃的鋁合金怎麼清洗 瀏覽:16
如何用焊接法短接損壞燈珠 瀏覽:732
2018年6月鋼材多少錢一噸 瀏覽:417
明日之後鋼管怎麼來 瀏覽:199
鈉鈣玻璃鋼化後有毒嗎 瀏覽:771
sus430代表什麼鋼材 瀏覽:443
高壓開關氣箱用什麼不銹鋼板 瀏覽:791