快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)無縫滾動(dòng)效果

更新時(shí)間：2017年07月21日 09:36:57 作者：zhaoke_930325

這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)無縫滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)無縫滾動(dòng)效果展示的具體代碼，供大家參考，具體內(nèi)容如下

首先應(yīng)該區(qū)分樣式中的絕對定位和相對定位，一般來說，移動(dòng)的單位為絕對定位，在這個(gè)實(shí)例中，移動(dòng)的Ul就是絕對定位，否則它根本無法滾動(dòng)，而它相對于div1滾動(dòng) ，則div1就作為他的相對定位。
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;這段代碼是實(shí)現(xiàn)無縫滾動(dòng)的核心，使之可以在不論左右滾動(dòng)的時(shí)候都有下一步圖片接上去。
在操作或者進(jìn)行比較的時(shí)候，都要用offset取值來進(jìn)行操作或者比較?。?！

代碼：

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