圖片輪播

html:

 <div id="wrapper"><!-- 最外層部分 -->
    <div id="banner"><!-- 輪播部分 -->
      <ul class="imgList"><!-- 圖片部分 -->
      <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
      </ul>
      <img src="./img/prev.png" width="20px" height="40px" id="prev">
      <img src="./img/next.png" width="20px" height="40px" id="next">
      <div class="bg"></div> <!-- 圖片底部背景層部分-->
      <ul class="infoList"><!-- 圖片左下角文字信息部分 -->
        <li class="infoOn">puss in boots1</li>
        <li>puss in boots2</li>
        <li>puss in boots3</li>
        <li>puss in boots4</li>
        <li>puss in boots5</li>
      </ul>
      <ul class="indexList"><!-- 圖片右下角序號部分 -->
        <li class="indexOn">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>

css:

 #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
  .imgList li{float:left;display: inline;}
  #prev,
  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
  #prev{left: 10px;}
  #next{right: 10px;}
  #prev:hover,
  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
  .infoList li{display: none;}
  .infoList .infoOn{display: inline;color: white;}
  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
  .indexList .indexOn{background: red;font-weight: bold;color: white;}

jquery：

  var curIndex = 0, //當前index
      imgLen = $(".imgList li").length; //圖片總數
     // 定時器自動變換2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen-1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //調用變換處理函數
    changeTo(curIndex); 
  },2500);
   //左箭頭滑入滑出事件處理
  $("#prev").hover(function(){ 
    //滑入清除定時器
    clearInterval(autoChange);
  },function(){ 
    //滑出則重置定時器
    autoChangeAgain();
  });
  //左箭頭點擊處理
  $("#prev").click(function(){ 
    //根據curIndex進行上一個圖片處理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });
  //右箭頭滑入滑出事件處理
  $("#next").hover(function(){ 
    //滑入清除定時器
    clearInterval(autoChange);
  },function(){ 
    //滑出則重置定時器
    autoChangeAgain();
  });
  //右箭頭點擊處理
  $("#next").click(function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });
  //對右下角按鈕index進行事件綁定處理等
  $(".indexList").find("li").each(function(item){ 
    $(this).hover(function(){ 
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){ 
      autoChangeAgain();
    });
  });
  //清除定時器時候的重置定時器--封裝
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen-1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //調用變換處理函數
      changeTo(curIndex); 
    },2500);
    }
  function changeTo(num){ 
    var goLeft = num * 400;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }

原生js:

 var curIndex = 0, //當前index
      imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組
      imgLen = imgArr.length,
      infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //獲取圖片info組
      indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //獲取控制index組
     // 定時器自動變換2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen -1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //調用變換處理函數
    changeTo(curIndex); 
  },2500);

  //清除定時器時候的重置定時器--封裝
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen -1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //調用變換處理函數
      changeTo(curIndex); 
    },2500);
    }

  //調用添加事件處理
  addEvent();

  //給左右箭頭和右下角的圖片index添加事件處理
 function addEvent(){
  for(var i=0;i<imgLen;i++){ 
    //閉包防止做用域內活動對象item的影響
    (function(_i){ 
    //鼠標滑過則清除定時器，並做變換處理
    indexArr[_i].onmouseover = function(){ 
      clearTimeout(autoChange);
      changeTo(_i);
      curIndex = _i;
    };
    //鼠標滑出則重置定時器處理
    indexArr[_i].onmouseout = function(){ 
      autoChangeAgain();
    };
     })(i);
  }

  //給左箭頭prev添加上一個事件
  var prev = document.getElementById("prev");
  prev.onmouseover = function(){ 
    //滑入清除定時器
    clearInterval(autoChange);
  };
  prev.onclick = function(){ 
    //根據curIndex進行上一個圖片處理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  };
  prev.onmouseout = function(){ 
    //滑出則重置定時器
    autoChangeAgain();
  };

   //給右箭頭next添加下一個事件
  var next = document.getElementById("next");
  next.onmouseover = function(){ 
    clearInterval(autoChange);
  };
  next.onclick = function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  };
  next.onmouseout = function(){ 
    autoChangeAgain();
  };
}

  //左右切換處理函數
  function changeTo(num){ 
    //設置image
    var imgList = getElementsByClassName("imgList")[0];
    goLeft(imgList,num*400); //左移必定距離
    //設置image 的 info
    var curInfo = getElementsByClassName("infoOn")[0];
    removeClass(curInfo,"infoOn");
    addClass(infoArr[num],"infoOn");
    //設置image的控制下標 index
    var _curIndex = getElementsByClassName("indexOn")[0];
    removeClass(_curIndex,"indexOn");
    addClass(indexArr[num],"indexOn");
  }


  //圖片組相對原始左移dist px距離
  function goLeft(elem,dist){ 
    if(dist == 400){ //第一次時設置left爲0px 或者直接使用內嵌法 style="left:0;"
      elem.style.left = "0px";
    }
    var toLeft; //判斷圖片移動方向是否爲左
    dist = dist + parseInt(elem.style.left); //圖片組相對當前移動距離
    if(dist<0){  
      toLeft = false;
      dist = Math.abs(dist);
    }else{ 
      toLeft = true;
    }
    for(var i=0;i<= dist/20;i++){ //這裏設定緩慢移動，10階每階40px
      (function(_i){ 
        var pos = parseInt(elem.style.left); //獲取當前left
        setTimeout(function(){ 
          pos += (toLeft)? -(_i * 20) : (_i * 20); //根據toLeft值指定圖片組位置改變
          //console.log(pos);
          elem.style.left = pos + "px";
        },_i * 25); //每階間隔50毫秒
      })(i);
    }
  }

  //經過class獲取節點
  function getElementsByClassName(className){ 
    var classArr = [];
    var tags = document.getElementsByTagName('*');
    for(var item in tags){ 
      if(tags[item].nodeType == 1){ 
        if(tags[item].getAttribute('class') == className){ 
          classArr.push(tags[item]);
        }
      }
    }
    return classArr; //返回
  }

  // 判斷obj是否有此class
  function hasClass(obj,cls){  //class位於單詞邊界
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
   }
   //給 obj添加class
  function addClass(obj,cls){ 
    if(!this.hasClass(obj,cls)){ 
       obj.className += cls;
    }
  }
  //移除obj對應的class
  function removeClass(obj,cls){ 
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
         obj.className = obj.className.replace(reg,'');
    }
  }