欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年07月07日 10:58:19   作者：艾新覺羅  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片無縫滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

原理

以向上無縫滾動(dòng)為例，其余幾個(gè)方向的無縫滾動(dòng)原理是一樣的，點(diǎn)擊向上無縫滾動(dòng)。

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

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

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


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

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

html部分

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

 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>無縫滾動(dòng)</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)滾動(dòng)，但是要實(shí)現(xiàn)無縫滾動(dòng)需在后面重復(fù)的添加幾張圖片，具體幾張要根據(jù)可視區(qū)域是圖片高度（向上，向下滾動(dòng)）或?qū)挾龋ㄏ蜃?，向右滾動(dòng)）的幾倍來確定，我這里設(shè)置可視區(qū)域的寬度為405px，故只需要重復(fù)一張即可，若假設(shè)是500px，則需重復(fù)兩張，類似這樣計(jì)算。

css部分

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

向上、向下滾動(dòng)樣式

　　兩者樣式一樣。ul#img的高度要是所有圖片的總高度，但是由于li本來就是塊級(jí)元素是由上往下排列的，不設(shè)置ul#img的高度也可以，但是向左或向右移動(dòng)時(shí)，必須設(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è)置則上下都會(huì)有2px的空白*/
  }

向上左、向右滾動(dòng)樣式

　　兩者樣式一樣。向左、向右滾動(dòng)時(shí)要用float：left讓li元素在一行并排顯示，而沒有用display：inline-block是因?yàn)閳D片這樣顯示會(huì)有空隙，是因?yàn)樾袃?nèi)元素產(chǎn)生的間隔，故用浮動(dòng)。這里必須要設(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部分

　　這里以向上滾動(dòng)為例，JavaScript代碼很簡單，往下的滾動(dòng)就是改變一下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);//必須得對(duì)timer重新賦值
  }

點(diǎn)擊向下無縫滾動(dòng)
點(diǎn)擊向左無縫滾動(dòng)
點(diǎn)擊向右無縫滾動(dòng)

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

相關(guān)文章

最新評(píng)論