基于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)文章
JavaScript可折疊區(qū)域?qū)崿F(xiàn)代碼
可折疊區(qū)域的基本思想：通過點(diǎn)擊某個地方來顯示或隱藏屏幕中的某個區(qū)域。2010-10-10
這篇文章主要介紹了JS添加或刪除HTML dom元素的方法,結(jié)合實例形式分析了javascript針對HTML DOM元素節(jié)點(diǎn)的創(chuàng)建、追加、刪除等相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了js簡單實現(xiàn)豎向tab選項卡的方法,涉及javascript實現(xiàn)tab切換效果的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-05-05
本文通過兩種方法給大家介紹vue-cli+es6引入es5寫的js，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2019-04-04
微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過改變rgba的a值實現(xiàn))
這篇文章主要介紹了微信小程序MUI導(dǎo)航欄透明漸變功能,結(jié)合實例形式分析了通過改變rgba的a值實現(xiàn)透明度漸變功能的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
菜單左右滾動顯示的實現(xiàn)方法有很多，在本文將為大家介紹下如何使用js實現(xiàn)，需要的朋友可以參考下，希望對大家有所幫助2013-11-11
javascript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法
查找數(shù)據(jù)有2種方式，順序查找和二分查找。順序查找適用于元素隨機(jī)排列的列表。二分查找適用于元素已排序的列表。二分查找效率更高，但是必須是已經(jīng)排好序的列表元素集合2015-04-04
十個優(yōu)秀的Ajax/Javascript實例網(wǎng)站收集
今天，要向大家推薦10個相當(dāng)棒的Ajax和Javascript國外資源網(wǎng)站或博客，它們提供了相當(dāng)多的高質(zhì)量Ajax、Javascript實例及教程，喜歡Ajax和Javascript的朋友絕對不能錯過。2010-03-03
js數(shù)組方法reduce經(jīng)典用法代碼分享
本文給大家整理了很多關(guān)于js數(shù)組方法reduce的經(jīng)典代碼片段，能夠讓大家更好的理解reduce的實例用法，一起學(xué)習(xí)下吧。2018-01-01
相信大家都知道數(shù)據(jù)可視化就是借助圖形化的手段把生硬的數(shù)據(jù)生動化，以此來展示出數(shù)據(jù)想要表達(dá)的信息，而圖表是最通常的一種數(shù)據(jù)可視化手段?？扇孔约杭兪謩泳帉懜鞣N圖表實在是讓人頭疼，各種計算各種煩。現(xiàn)在就為大家介紹如何用D3.js來實現(xiàn)柱狀圖。2016-09-09