JavaScript實現(xiàn)圖片無縫滾動效果

更新時間：2017年07月07日 10:58:19 作者：艾新覺羅

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

圖片無縫滾動就是圖片一直不停的滾動，好像沒有無窮無盡似的，實際上就是幾張圖片不停的循環(huán)，但是看不出有從最后面切換到最前面的效果，這就是無縫滾動，文字和圖片都可以無縫滾動，這里介紹的是圖片，文字是同樣的原理。

原理

以向上無縫滾動為例，其余幾個方向的無縫滾動原理是一樣的，點擊向上無縫滾動。

設(shè)定一個可視區(qū)域，超過可視區(qū)域的部分隱藏，這里是將nav部分作為可視區(qū)域，ul#img是中包含所有的圖片，實現(xiàn)無縫滾動的關(guān)鍵地方在這：

if(nav.scrollTop==list[list.length-1].offsetTop){
    nav.scrollTop=0
  }else{
    nav.scrollTop++;
  }

這里的nav.scrollTop是指當(dāng)前的可視對象nav的頂端與正在顯示的對象ul#img的頂端的距離，通俗一點來說，就是滾動條向下滾動的距離；list[i]就是要顯示的圖片列表，list[list.length-1]是指最后一張圖片，list[list.length-1].offsetTop是指最后一張圖片的頂部到它的父元素的頂部的距離，這個距離是不變固定的，父元素的position必須不能是static（默認(rèn)的），而且也不能是div，否則會跳過這個元素把上一級當(dāng)成父元素。

當(dāng)向下滾動的距離與list[list.length-1].offsetTop的距離相等時，即圖片5已經(jīng)劃過，到了顯示圖片1的時候，讓滾動的距離瞬間為0，進(jìn)行切換時由于兩張圖片是一樣的，人觀看時察覺不到，故形成了無縫滾動。

可以發(fā)現(xiàn)這里重疊了一張圖片，是因為當(dāng)最后一張圖片滾動完之后要形成循環(huán)，可視區(qū)域內(nèi)一定要有圖片否則一片空白，這里設(shè)定的可視區(qū)域就是一張圖片的高度，故重復(fù)的是圖片1，如果比一張圖片高度要大，則需按順序多重復(fù)幾張圖片列表的圖片。

html部分

四個方向：向上、向下、向左、向右的無縫滾動的html部分是一樣的，就表現(xiàn)的部分是一樣的，即

 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>無縫滾動</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <nav>
    <ul id="img">
      <li><img src="../images/img1.jpg" alt="img1"></li>
      <li><img src="../images/img2.jpg" alt="img2"></li>
      <li><img src="../images/img3.jpg" alt="img3"></li>
      <li><img src="../images/img4.jpg" alt="img4"></li>
      <li><img src="../images/img5.jpg" alt="img5"></li>
      <li><img src="../images/img1.jpg" alt="img1"></li>
    </ul>
  </nav>
  <script type="text/javascript" src="script.js"></script>
  </body>
  </html>

這里需要注意以下：設(shè)定的是5張720*405尺寸圖片的循環(huán)滾動，但是要實現(xiàn)無縫滾動需在后面重復(fù)的添加幾張圖片，具體幾張要根據(jù)可視區(qū)域是圖片高度（向上，向下滾動）或?qū)挾龋ㄏ蜃?，向右滾動）的幾倍來確定，我這里設(shè)置可視區(qū)域的寬度為405px，故只需要重復(fù)一張即可，若假設(shè)是500px，則需重復(fù)兩張，類似這樣計算。

css部分

　　這里以向上滾動為例，其余四個方向的樣式是類似的，只有些許地方不一樣。這里需要注意幾點：
　　1、nav是可視區(qū)域，一定要設(shè)置寬高，而且overflow要設(shè)置為hidden，否則移動不了；
　　2、ul#img的position要設(shè)置，否則默認(rèn)為static，會影響offsetTop屬性，因為父元素的position不能為static，否則會跳過該元素往上一級尋找；
　　3、要設(shè)置ul#img里面的li元素，否則圖片上下都會有2px的空白，影響滾動時的效果。

向上、向下滾動樣式

　　兩者樣式一樣。ul#img的高度要是所有圖片的總高度，但是由于li本來就是塊級元素是由上往下排列的，不設(shè)置ul#img的高度也可以，但是向左或向右移動時，必須設(shè)置ul#img的寬度為所有圖片的總寬度，這里為保持一致就設(shè)置了高度為所有圖片的總高度；

 *{
    padding: 0;
    margin: 0;
  }
  nav {
    width: 720px;
    height: 405px; /*設(shè)置可見部分的高度*/
    margin: 40px auto;
    border: 5px solid #eee;
    overflow: hidden;
  }
  #img{
    width: 720px;
    height:2430px;/*設(shè)置可見部分的高度*/
    position: relative;/*默認(rèn)是static*/
  }
  #img li{
    width: 720px;
    height:405px;/*不設(shè)置則上下都會有2px的空白*/
  }

向上左、向右滾動樣式

　　兩者樣式一樣。向左、向右滾動時要用float：left讓li元素在一行并排顯示，而沒有用display：inline-block是因為圖片這樣顯示會有空隙，是因為行內(nèi)元素產(chǎn)生的間隔，故用浮動。這里必須要設(shè)置ul#img的寬度為圖片的總寬度。

 *{
    padding: 0;
    margin: 0;
  }
  nav {
    width: 720px;
    height: 405px; /*設(shè)置可見部分的高度*/
    margin: 40px auto;
    border: 5px solid #eee;
    overflow: hidden;
  }
  #img{
    width: 4320px;
    height:405px;/*設(shè)置可見部分的高度*/
    position: relative;/*默認(rèn)是static*/
  }
  #img li{
    width: 720px;
    height:405px;
    float:left;
  }

JavaScript部分

　　這里以向上滾動為例，JavaScript代碼很簡單，往下的滾動就是改變一下scrollTop就行，而左右方向就是將scrollTop變成scrollLeft，offsetTop換成offsetLeft就行。

var nav=document.getElementsByTagName('nav')[0];
  var list=document.getElementById('img').getElementsByTagName('li');
  function scroll() {
    if(nav.scrollTop==list[list.length-1].offsetTop){
      nav.scrollTop=0;
    }else{
      nav.scrollTop++;
    }
  }
  var timer= setInterval(scroll,10);

  nav.onmouseover=function(){
    clearInterval(timer);
  };
  nav.onmouseout=function () {
    timer=setInterval(scroll,10);//必須得對timer重新賦值
  }

點擊向下無縫滾動
 點擊向左無縫滾動
 點擊向右無縫滾動

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: