讓圖片跳躍起來 javascript圖片輪播特效

更新時(shí)間：2016年02月16日 15:52:35 作者：TOWAYWU

讓圖片跳躍起來這篇文章主要介紹了javascript圖片輪播特效，圖片按照間隔時(shí)間進(jìn)行切換，文章具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

圖片輪播效果,在現(xiàn)在的網(wǎng)站的首頁,差不多是必備的效果顯示. 所以我從三個(gè)方面來講解這一效果的簡(jiǎn)單實(shí)現(xiàn).

圖片跳動(dòng)起來
圖片序列控制的實(shí)現(xiàn)
前后按鈕控制的實(shí)現(xiàn)

這篇文章來看圖片按照間隔時(shí)間進(jìn)行切換.

我們先把結(jié)構(gòu)代碼完成,這個(gè)我就不做詳細(xì)的講解了.看效果

代碼如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
    }
    ul,ol,li{
     list-style: none;
      margin: 0;
      padding: 0;
    }
    #slider{
      width: 800px;
      height: 300px;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
    }
    #slider ul{
      width: 2400px;
      position: relative;
    }
    #slider ul:after{
      content: " ";
      width: 0;
      height: 0;
      display: block;
    }
    #slider ul li{
      float: left;
      width: 800px;
      height: 300px;
      overflow: hidden;
    }
    #slider ul li img{
      width: 100%;
    }
    #slider ol{
      position: absolute;
      bottom: 10px;
      left: 46%;
    }
    #slider ol li{
      display: inline-block;
    }
    #slider ol li a{
      display: inline-block;
      padding:4px 8px;
      border-radius:15px;
      background-color: #000;
      color: #fff;
    }
    #slider .prev, #slider .next{
      display: inline-block;
      position: absolute;
      top: 49%;
      background-color: #000;
      opacity: 0.6;
      color: #fff;
      padding: 3px;
    }
    #slider .prev{
      left: 10px;
    }
    #slider .next{
      right: 10px;
    }
  </style>
</head>
<body>
  
  <div id="slider">
    <ul>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
    </ul>
    <ol>
      <li> <a href="#">1</a> </li>
      <li> <a href="#">2</a> </li>
      <li> <a href="#">3</a> </li>
    </ol>
    <a href="#">上一張</a>
    <a href="#">下一張</a>
  </div>
</body>
</html>

好的,現(xiàn)在我們來通過JS控制圖片的跳轉(zhuǎn).

首先我們需要找到圖片所在的位置,這里我們是通過ul來進(jìn)行布局的所以首先得找到UL下的LI的數(shù)目

接著讓圖片一張一張的展示,我們使用了視窗的模式,就是遮罩層的模式.#slider是一個(gè)視窗,ul是視窗外的景色,而ul得景色是橫向排版的

然后就是讓外面的景色顯示為視窗的大小,也就是讓每一張圖片作為每一次的視窗景色,這里就是控制圖片的大小要與視窗同等大小.

上面講解的是一個(gè)概念,也就是布局的處理,下面我們JS的控制了,要實(shí)現(xiàn)圖片間隔的顯示不同.我們就需要用到JS的setInterval或者setTimeout.這里我們使用setInterval(因?yàn)檫@個(gè)用起來方便.)

每跳轉(zhuǎn)一次,我們控制的是UL的position的left,這樣就可以讓ul下的景色,在每一次都是顯示不一樣,而這個(gè)left是根據(jù)視窗的寬度來決定,第一張left當(dāng)然是-800 * 0 ,第二種就是 -800*1,第三種是-800*2...依次類推.那我們就可以得出下面的代碼

<script>
   (function(){
     var slider = document.getElementById("slider");
     var imgul = slider.getElementsByTagName("ul")[0];
     var imglis = imgul.getElementsByTagName("li");
     var len = imglis.length;
     var index = 0;
     setInterval(function(){
       if(index >= len){
         index = 0;
       }
        imgul.style.left = - (800 * index) + "px";
        index++;
     },2000);
   })();
 </script>

JS代碼這樣看起來就很簡(jiǎn)單了. 我這里是設(shè)置2秒跳轉(zhuǎn)依次,然后跳轉(zhuǎn)的次數(shù)大于等于圖片的數(shù)目后,讓其返回到第一張圖片.