Javascript 實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)
效果 : 鼠標(biāo)移入圖片 停止?jié)L動(dòng), 鼠標(biāo)移出自動(dòng)滾動(dòng)
可以調(diào)整向左或右方向滾動(dòng)
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
overflow: hidden;
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background: red;
}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 178px;
height: 108px;
list-style: none;
}
</style>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li>
<img src="img/無(wú)縫滾動(dòng)/1.jpg" />
</li>
<li>
<img src="img/無(wú)縫滾動(dòng)/2.jpg" />
</li>
<li>
<img src="img/無(wú)縫滾動(dòng)/3.jpg" />
</li>
<li>
<img src="img/無(wú)縫滾動(dòng)/4.jpg" />
</li>
</ul>
</div>
</body>
以上是一個(gè)簡(jiǎn)單的布局,下面是主要的Javascript 代碼
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var speed = 2;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
function move() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + 'px';
}
oUl.style.left = oUl.offsetLeft + speed + 'px';
}
var timer = setInterval(move, 30);
oDiv.onmouseover = function() {
clearInterval(timer);
};
oDiv.onmouseout = function() {
timer = setInterval(move, 30);
};
document.getElementsByTagName('a')[0].onclick = function() {
speed = -2;
};
document.getElementsByTagName('a')[1].onclick = function() {
speed = 2;
};
}
</script>
簡(jiǎn)單講下思路:
首先設(shè)置ul 里面的圖片一共有8張 oUl.innerHTML += oUl.innerHTML;
在 計(jì)算ul的寬度為 li的實(shí)際寬度*8
之后將 多余的內(nèi)容隱藏
注意 : oUl.offsetLeft 肯定是負(fù)值
所以判斷的時(shí)候不要把負(fù)號(hào)漏掉
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
這段表示 圖片滾動(dòng)到一半了,迅速把圖片拉回來(lái),因?yàn)槌绦驁?zhí)行的太快,所以幾乎看不出來(lái) 實(shí)現(xiàn)無(wú)縫滾動(dòng)
最后使用 變量 speed 來(lái)控制左右方向的滾動(dòng)。
以上代碼只是實(shí)現(xiàn)了最基本的功能,小伙伴們可以在此基礎(chǔ)上繼續(xù)完善。
- javascript實(shí)現(xiàn)多張圖片左右無(wú)縫滾動(dòng)效果
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)
- 使用Javascript簡(jiǎn)單實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)
- 可自定義速度的js圖片無(wú)縫滾動(dòng)示例分享
- JS圖片無(wú)縫滾動(dòng)(簡(jiǎn)單利于使用)
- jcarousellite.js 基于Jquery的圖片無(wú)縫滾動(dòng)插件
- JS實(shí)現(xiàn)單張或多張圖片持續(xù)無(wú)縫滾動(dòng)的示例代碼
相關(guān)文章
JavaScript中的this例題實(shí)戰(zhàn)總結(jié)詳析
使用JavaScript開(kāi)發(fā)的時(shí)候,很多人多多少少都會(huì)被this的指向問(wèn)題搞蒙圈,下面這篇文章主要給大家介紹了關(guān)于JavaScript中this例題實(shí)戰(zhàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06JS如何將秒數(shù)轉(zhuǎn)化為時(shí)分秒的形式
在實(shí)際工作中經(jīng)常會(huì)遇見(jiàn)把秒數(shù)轉(zhuǎn)化為時(shí)分秒的問(wèn)題,如何處理呢?下面這篇文章主要給大家介紹了關(guān)于JS如何將秒數(shù)轉(zhuǎn)化為時(shí)分秒形式的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12關(guān)于Error:Unknown?option?'--inline'報(bào)錯(cuò)的解決辦法
這篇文章主要給大家介紹了關(guān)于Error:Unknown?option?'--inline'報(bào)錯(cuò)的解決辦法,文中將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09JavaScript比較同一天的時(shí)間大小實(shí)例代碼
在項(xiàng)目開(kāi)發(fā)中,經(jīng)常會(huì)遇到同一天內(nèi)的時(shí)間大小比較,下面小編給大家?guī)?lái)了JavaScript比較同一天的時(shí)間大小實(shí)例代碼,需要的朋友參考下2018-02-02詳解如何在webpack中做預(yù)渲染降低首屏空白時(shí)間
這篇文章主要介紹了詳解如何在webpack中做預(yù)渲染降低首屏空白時(shí)間,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08關(guān)于取不到由location.href提交而來(lái)的上級(jí)頁(yè)面地址的解決辦法
驗(yàn)證上級(jí)頁(yè)面來(lái)源取不到由location.href提交而來(lái)的頁(yè)面地址,搜索了一大堆沒(méi)有合適的解決辦法,突然想到通過(guò)模擬JS點(diǎn)擊鏈接的方法2009-07-07解讀input標(biāo)簽的value屬性及name屬性
這篇文章主要介紹了解讀input標(biāo)簽的value屬性,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01JavaScript實(shí)現(xiàn)移動(dòng)端滑動(dòng)選擇日期功能
這篇文章主要介紹了JavaScript實(shí)現(xiàn)滑動(dòng)選擇日期功能,基于sui-mobile的移動(dòng)端實(shí)現(xiàn),感興趣的小伙伴們可以參考一下2016-06-06