原生js實現(xiàn)圖片輪播特效

更新時間：2015年12月18日 08:35:28 作者：super_walker

這篇文章主要介紹了原生js實現(xiàn)圖片輪播特效，適合用于商品展示，實現(xiàn)最簡單的廣告輪播效果，感興趣的小伙伴們可以參考一下

本文特意為原生js實現(xiàn)圖片輪播特效代碼做了下總結(jié)，分享給大家供大家參考，歡迎大家學習。

運行效果圖：

具體代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>最簡單的輪播廣告</title>
  <style>
    body, div, ul, li {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    body {
      background: #000;
      text-align: center;
      font: 12px/20px Arial;
    }

    #box {
      position: relative;
      width: 492px;
      height: 172px;
      background: #fff;
      border-radius: 5px;
      border: 8px solid #fff;
      margin: 10px auto;
    }

    #box .list {
      position: relative;
      width: 490px;
      height: 170px;
      overflow: hidden;
      border: 1px solid #ccc;
    }

    #box .list li {
      position: absolute;
      top: 0;
      left: 0;
      width: 490px;
      height: 170px;
      opacity: 0;
      transition: opacity 0.5s linear
    }

    #box .list li.current {
      opacity: 1;
    }

    #box .count {
      position: absolute;
      right: 0;
      bottom: 5px;
    }

    #box .count li {
      color: #fff;
      float: left;
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-right: 5px;
      overflow: hidden;
      background: #F90;
      opacity: 0.7;
      border-radius: 20px;
    }

    #box .count li.current {
      color: #fff;
      opacity: 0.7;
      font-weight: 700;
      background: #f60
    }
  </style>
</head>
<body>
<div id="box">
  <ul class="list">
    <li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li>
    <li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li>
  </ul>
  <ul class="count">
    <li class="current">1</li>
    <li class="">2</li>
    <li class="">3</li>
    <li class="">4</li>
    <li class="">5</li>
  </ul>
</div>


<script>
  var box=document.getElementById('box');
  var uls=document.getElementsByTagName('ul');
  var imgs=uls[0].getElementsByTagName('li');
  var btn=uls[1].getElementsByTagName('li');
  var i=index=0; //中間量，統(tǒng)一聲明；
  var play=null;
  console.log(box,uls,imgs,btn);//獲取正確

  //圖片切換, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不糾結(jié)、簡單 在css里面
  function show(a){        //方法定義的是當傳入一個下標時，按鈕和圖片做出對的反應
    for(i=0;i<btn.length;i++ ){
      btn[i].className='';    //很容易看懂吧？每個按鈕都先設(shè)置成看不見，然后把當前按鈕設(shè)置成可見。
      btn[a].className='current';
    }
    for(i=0;i<imgs.length;i++){ //把圖片的效果設(shè)置和按鈕相同
      imgs[i].style.opacity=0;
      imgs[a].style.opacity=1;
    }
  }
  //切換按鈕功能，響應對應圖片
  for(i=0;i<btn.length;i++){
    btn[i].index=i;  //不知道你有沒有發(fā)現(xiàn)，循環(huán)里的方法去調(diào)用循環(huán)里的變量體i，會出現(xiàn)調(diào)到的不是i的變動值的問題。所以我先在循環(huán)外保存住
    btn[i].onmouseover=function(){
      show(this.index);
      clearInterval(play); //這就是最后那句話追加的功能
    }
  }

  //自動輪播方法
function autoPlay(){
      play=setInterval(function(){ //這個paly是為了保存定時器的，變量必須在全局聲明 不然其他方法調(diào)不到 或者你可以調(diào)用auto.play 也許可以但是沒時間試了
      index++;
      index>=imgs.length&&(index=0);//可能有優(yōu)先級問題，所以用了括號，沒時間測試了。
      show(index);
    },1000)
  }
  autoPlay();//馬上調(diào)用，我試過用window.onload調(diào)用這個方法，但是調(diào)用之后影響到了其他方法，使用autoPlay所以只能這樣調(diào)用了

  //div的鼠標移入移出事件
  box.onmouseover=function(){
    clearInterval(play);
  };
  box.onmouseout=function(){
    autoPlay();
  };
  //按鈕下標也要加上相同的鼠標事件，不然圖片停止了，定時器沒停，會突然閃到很大的數(shù)字上。 貌似我可以直接追加到之前定義事件中。

</script>
</body>
</html>

希望本文所述對大家學習javascript程序設(shè)計有所幫助。

您可能感興趣的文章: