基于JavaScript實現(xiàn)無縫滾動效果
更新時間：2017年07月21日 09:36:57 作者：zhaoke_930325
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)無縫滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)無縫滾動效果展示的具體代碼，供大家參考，具體內(nèi)容如下
- 首先應(yīng)該區(qū)分樣式中的絕對定位和相對定位，一般來說，移動的單位為絕對定位，在這個實例中，移動的Ul就是絕對定位 ，否則它根本無法滾動，而它相對于div1滾動 ，則div1就作為他的相對定位。
- oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;這段代碼是實現(xiàn)無縫滾動的核心，使之可以在不論左右滾動的時候都有下一步圖片接上去。
- 在操作或者進(jìn)行比較的時候，都要用offset取值來進(jìn)行操作或者比較?。?！
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無縫滾動2</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
#div1{
position: relative;
width: 800px;
height: 200px;
background:red;
margin:100px auto;
overflow: hidden;
}
#div1 ul{
position: absolute;
left: 0;
top: 0;
}
#div1 ul li{
float: left;
list-style: none;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oDiv.getElementsByTagName('li');
var aA = document.getElementsByTagName('a');
var speed = 3;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
var timer=setInterval(move,30);
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';
};
oDiv.onmouseover=function()
{
clearInterval(timer);
};
oDiv.onmouseout=function()
{
timer=setInterval(move,30);
};
aA[0].onclick=function()
{
speed=-3;
};
aA[1].onclick=function()
{
speed=3;
};
};
</script>
</head>
<body>
<a href="javascript:;">向左</a>
<a href="javascript:;">向右</a>
<div id="div1">
<ul>
<li><img src="images/n1.jpg"></li>
<li><img src="images/n2.jpg"></li>
<li><img src="images/n3.jpg"></li>
<li><img src="images/n4.jpg"></li>
</ul>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于pako.js實現(xiàn)gzip的壓縮和解壓功能示例
這篇文章主要介紹了基于pako.js實現(xiàn)gzip的壓縮和解壓功能,結(jié)合具體實例形式分析了pako.js實現(xiàn)字符串壓縮與解壓縮的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
微信小程序基于數(shù)據(jù)庫時間實現(xiàn)商品倒計時功能(可重用代碼)
這篇文章主要介紹了微信小程序基于數(shù)據(jù)庫時間實現(xiàn)商品倒計時功能(可重用代碼),代碼很完整，拿來就可以使用，現(xiàn)在我把完整的代碼分享給大家，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了JS實現(xiàn)的找零張數(shù)最小問題,涉及javascript數(shù)學(xué)運算相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
這篇文章全面解析了Bootstrap表單的使用方法，本文重點介紹Bootstrap表單控件，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義聯(lián)系人彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
js扁平數(shù)組和樹結(jié)構(gòu)相互轉(zhuǎn)換處理方法
這篇文章主要給大家介紹了關(guān)于js扁平數(shù)組和樹結(jié)構(gòu)相互轉(zhuǎn)換處理方法的相關(guān)資料,之前面試有遇到過這個問題,面試官問如何把一個數(shù)組數(shù)據(jù)扁平,然后轉(zhuǎn)化為Tree結(jié)構(gòu)數(shù)據(jù),工作中剛好也用到了,所以總結(jié)下,需要的朋友可以參考下2023-07-07
在日常開發(fā)中我們經(jīng)常需要處理日期和時間的操作,下面這篇文章主要介紹了前端利器DateUtils日期時間工具的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
當(dāng)前世界上有很多種瀏覽器，除了我們熟知的IE, Firefox, Opera, Safari四大瀏覽器之外，世界上還有近百種瀏覽器，有時候我們需要判斷瀏覽器與版本方便后續(xù)的操作，一句話瀏覽器的兼容性太差了，缺少標(biāo)準(zhǔn)2014-05-05
這篇文章主要介紹了JS實現(xiàn)三個層重疊點擊互相切換的方法,涉及JavaScript動態(tài)操作頁面定位屬性的相關(guān)技巧,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了微信小程序中換行空格（多個空格）寫法詳解,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07