您當前位置：首頁 > web前端 > jscript > 實例教程：JS實現圖片無間隙滾動代碼

實例教程：JS實現圖片無間隙滾動代碼

來源：程序員人生發布時間：2014-03-21 23:46:19 閱讀次數：2657次

　　網(LieHuo.Net)教程最近要做一個首頁圖片無間隙的滾動的效果,原先準備用marquee來做,但是<marquee>循環滾動時有間隙.在網上找了下。

這個相對簡單,實現思路：一個設定寬度并且隱藏超出它寬度的內容的容器demo，里面放demo1和demo2， demo1是滾動內容,demo2為demo1的直接克隆，通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的，當滾動至demo1與demo2的交界處時直接跳回初始位置，因為demo1與demo2一樣，所以分不出跳動的瞬間，從而達到“無縫”滾動的目的。

先了解一下對象的幾個的屬性：

以下為引用的內容：
innerHTML:設置或獲取位于對象起始和結束標簽內的 HTML
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
offsetWidth:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的寬度

<html><head><title>建站學院 www.vxbq.cn</title><style type="text/css">body{}{margin:0px auto; padding:0px;}ul,li{}{margin:0px; padding:0px;list-style:none;}.sqBorder {}{width:602px; height:64px; padding:10px; border:1px #000000 solid; background:#555555;}.scroll_div {}{width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}.scroll_div img {}{width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;}#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{}{display:inline;}/**//*設置ul和li橫排*/</style><script language="javascript">function ScrollImgLeft(){var speed=20var scroll_begin = document.getElementById("scroll_begin");var scroll_end = document.getElementById("scroll_end");var scroll_div = document.getElementById("scroll_div");scroll_end.innerHTML=scroll_begin.innerHTMLfunction Marquee(){ if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) scroll_div.scrollLeft-=scroll_begin.offsetWidth else scroll_div.scrollLeft++}var MyMar=setInterval(Marquee,speed)scroll_div.onmouseover=function() {clearInterval(MyMar)}scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}}</script></head><body><h2 align="center">向左滾動</h2><div style="text-align:center"><div class="sqBorder"><div id="scroll_div" class="scroll_div"><div id="scroll_begin"><ul><li <img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li><li><img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li><li><img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li><li><img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li><li><img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li></ul></div><div id="scroll_end"></div></div></div><script type="text/javascript">ScrollImgLeft();</script></div><style type="text/css">body{}{margin:0px auto; padding:0px;}ul,li{}{margin:0px; padding:0px;list-style:none;}.sqBorder {}{width:122px; height:182px; padding:10px; border:1px #000000 solid; background:#555555;}.scroll_div {}{width:122px; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}.scroll_div img {}{width:120px;height:60px;border:0;margin: 8px auto; border:1px #efefef solid;}</style><script language="javascript">function ScrollImgTop(){var speed=20var scroll_begin = document.getElementById("scroll_begin");var scroll_end = document.getElementById("scroll_end");var scroll_div = document.getElementById("scroll_div");scroll_end.innerHTML=scroll_begin.innerHTMLfunction Marquee(){ if(scroll_end.offsetTop-scroll_div.scrollTop<=0) scroll_div.scrollTop-=scroll_begin.offsetHeight else scroll_div.scrollTop++}var MyMar=setInterval(Marquee,speed)scroll_div.onmouseover=function() {clearInterval(MyMar)}scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}}</script><h2 align="center">向上滾動</h2><div style="text-align:center"><div class="sqBorder"><div id="scroll_div" class="scroll_div"><div id="scroll_begin"><ul><li><img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li><li><img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li><li><img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li><li><img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li><li><img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li><li><img src="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" _fcksavedurl="http://www.vxbq.cn/images/logo.gif" /></li></ul></div><div id="scroll_end"></div></div></div><script type="text/javascript">ScrollImgTop();</script></div></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' _fcksavedurl='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 網絡廣告營銷策略效果與實踐的總結

下一篇 “樂兒網”成長歷程：母嬰網站的后起之秀

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

實例教程：JS實現圖片無間隙滾動代碼