JavaScript實現(xiàn)輪播圖片完整代碼

更新時間：2020年03月07日 10:07:30 作者：最愛松露巧克力

這篇文章主要為大家介紹了JavaScript實現(xiàn)輪播圖片的完整代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)輪播圖片的具體代碼，供大家參考，具體內容如下

JS代碼注釋清晰明了，一看就懂！

<!DOCTYPE html>
<html lang="en">

 <head>
 <meta charset="UTF-8">
 <title>最簡單的輪播效果</title>
 <style>
 * {
 margin: 0;
 padding: 0
 }
 
 .box {
 width: 500px;
 height: 300px;
 border: 1px solid #ccc;
 margin: 100px auto;
 padding: 5px;
 }
 
 .inner {
 width: 500px;
 height: 300px;
 position: relative;
 overflow: hidden;
 }
 
 .inner img {
 width: 500px;
 height: 300px;
 vertical-align: top
 }
 
 ul {
 width: 1000%;
 position: absolute;
 list-style: none;
 left: 0;
 top: 0;
 }
 
 .inner li {
 float: left;
 }
 
 ol {
 position: absolute;
 height: 20px;
 right: 20px;
 bottom: 20px;
 text-align: center;
 padding: 5px;
 }
 
 ol li {
 display: inline-block;
 width: 20px;
 height: 20px;
 line-height: 20px;
 background-color: #fff;
 margin: 5px;
 cursor: pointer;
 }
 
 ol .current {
 background-color: red;
 }
 </style>
 </head>

 <body>
 <div class="box" id="box">
 <div class="inner">
 <!--輪播圖-->
 <ul>
  <li>
  <div><img src="img/001.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/1.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/6.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/3.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/4.png" alt=""></div>
  </li>

 </ul>
 </div>
 </div>
 <script>
 /**
 *
 * @param id 傳入元素的id
 * @returns {HTMLElement | null} 返回標簽對象，方便獲取元素
 */
 function my$(id) {
 return document.getElementById(id);
 }
 //獲取各元素，方便操作
 var box = my$("box");
 var inner = box.children[0];
 var ulObj = inner.children[0];
 var list = ulObj.children;
 var olObj = inner.children[1];
 var imgWidth = inner.offsetWidth;
 var right = my$("right");
 var pic = 0;
 //根據li個數(shù)，創(chuàng)建小按鈕
 for(var i = 0; i < list.length; i++) {
 var liObj = document.createElement("li");
 //olObj.appendChild(liObj);
 liObj.innerText = (i + 1);
 liObj.setAttribute("index", i);
 //為按鈕注冊mouseover事件
 liObj.onmouseover = function() {
  //先清除所有按鈕的樣式
  for(var j = 0; j < olObj.children.length; j++) {
  olObj.children[j].removeAttribute("class");
  }
  this.className = "current";
  pic = this.getAttribute("index");
  animate(ulObj, -pic * imgWidth);
 }
 }
 //設置ol中第一個li有背景顏色
 //olObj.children[0].className = "current";
 //克隆一個ul中第一個li,加入到ul中的最后=====克隆
 ulObj.appendChild(ulObj.children[0].cloneNode(true));
 var timeId = setInterval(onmouseclickHandle, 4000);
 function onmouseclickHandle() {
 //如果pic的值是5,恰巧是ul中l(wèi)i的個數(shù)-1的值,此時頁面顯示第六個圖片,而用戶會認為這是第一個圖,
 //所以,如果用戶再次點擊按鈕,用戶應該看到第二個圖片
 if(pic == list.length - 1) {
  //如何從第6個圖,跳轉到第一個圖
  pic = 0; //先設置pic=0
  ulObj.style.left = 0 + "px"; //把ul的位置還原成開始的默認位置
 }
 pic++; //立刻設置pic加1,那么此時用戶就會看到第二個圖片了
 animate(ulObj, -pic * imgWidth); //pic從0的值加1之后,pic的值是1,然后ul移動出去一個圖片
 
 }
 //設置任意的一個元素,移動到指定的目標位置
 function animate(element, target) {
 clearInterval(element.timeId);
 //定時器的id值存儲到對象的一個屬性中
 element.timeId = setInterval(function() {
  //獲取元素的當前的位置,數(shù)字類型
  var current = element.offsetLeft;
  //每次移動的距離
  var step = 10;
  step = current < target ? step : -step;
  //當前移動到位置
  current += step;
  if(Math.abs(current - target) > Math.abs(step)) {
  element.style.left = current + "px";
  } else {
  //清理定時器
  clearInterval(element.timeId);
  //直接到達目標
  element.style.left = target + "px";
  }
 }, 10);
 }
 </script>
 </body>

</html>

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: