快捷導(dǎo)航

JavaScript實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖

更新時(shí)間：2020年03月16日 13:12:19 作者：阿學(xué)世界

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

html代碼段

圖片自己添加，或者使用本人的上傳照片，拉到最下面即可看見(jiàn)

<div class="wrap" id="wrap">
 <div class="slide" id="slide">
 <ul>
  <li><a href="#" ><img src="images/slidepic1.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic2.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic4.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic5.jpg" alt=""/></a></li>
 </ul>
 <div class="arrow" id="arrow">
  <a href="javascript:;" class="prev" id="arrLeft"></a>
  <a href="javascript:;" class="next" id="arrRight"></a>
 </div>
 </div>
</div>

css代碼段：

初始化 reset

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
 margin: 0;
 padding: 0
}

body, button, input, select, textarea {
 font: 12px/1.5 "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", sans-serif;
 color: #666;
}

ol, ul {
 list-style: none;
}

a {
 text-decoration: none;
}

fieldset, img {
 border: 0;
 vertical-align: top;
}

a, input, button, select, textarea {
 outline: none;
}

a, button {
 cursor: pointer;
}

.wrap {
 width: 1200px;
 margin: 100px auto;
}

.slide {
 height: 500px;
 position: relative;
}

.slide li {
 position: absolute;
 left: 200px;
 top: 0;
}

.slide li img {
 width: 100%;
}

.arrow {
 opacity: 0;
 position: absolute;
 top: 50%;
 z-index: 1000;
 width: 100%;
}

.prev, .next {
 width: 76px;
 height: 112px;
 position: absolute;
 z-index: 99;
}

.prev {
 left: 0;
 background: url(../images/prev.png) no-repeat;
}

.next {
 right: 0;
 background-image: url(../images/next.png);
}

js代碼段：

這個(gè)是封裝好的的js代碼，直接引用即可

function animate(obj, json, fn) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {
  var flag = true;
  for (var k in json) {
  if (k === "opacity") {
   var leader = getStyle(obj, k) * 100;
   var target = json[k] * 100;
   var step = (target - leader) / 10;
   step = step > 0 ? Math.ceil(step) : Math.floor(step);
   leader = leader + step;
   obj.style[k] = leader / 100;
  } else if (k === "zIndex") {
   obj.style.zIndex = json[k];
  } else {
   var leader = parseInt(getStyle(obj, k)) || 0;
   var target = json[k];
   var step = (target - leader) / 10;
   step = step > 0 ? Math.ceil(step) : Math.floor(step);
   leader = leader + step;
   obj.style[k] = leader + "px";
  }
  if (leader != target) {
   flag = false;
  }
  }
  if (flag) {
  clearInterval(obj.timer);
  if (fn) {
   fn();
  }
  }
 }, 15);
 }
 function getStyle(obj, attr) {
 if (window.getComputedStyle) {
  return window.getComputedStyle(obj, null)[attr];
 } else {
  return obj.currentStyle[attr];
 }
 }

定義onload函數(shù)，獲取每一個(gè)對(duì)象，設(shè)置鼠標(biāo)經(jīng)過(guò)事件，鼠標(biāo)經(jīng)過(guò)輪播圖讓箭頭漸漸地顯示鼠標(biāo)離開(kāi)漸漸消失；然后.設(shè)置圖片位置(給對(duì)象賦值)

window.onload = function () {
 //alert("外部的JS");
 //找人
 var wrap = document.getElementById("wrap");
 var arrow = document.getElementById("arrow");
 var arrLeft = document.getElementById("arrLeft");
 var arrRight = document.getElementById("arrRight");
 var slide = document.getElementById("slide");
 var ul = slide.children[0];
 var lis = ul.children;//所有圖片
 //1.鼠標(biāo)經(jīng)過(guò)輪播圖 讓箭頭漸漸地顯示 鼠標(biāo)離開(kāi)漸漸消失
 wrap.onmouseover = function () {
 animate(arrow, {"opacity": 1});
 };
 wrap.onmouseout = function () {
 animate(arrow, {"opacity": 0});
 };
 //2.設(shè)置圖片位置

 var config = [
 {
  "width": 400,
  "top": 20,
  "left": 50,
  "opacity": 0.2,
  "zIndex": 2
 },//0
 {
  "width": 600,
  "top": 70,
  "left": 0,
  "opacity": 0.8,
  "zIndex": 3
 },//1
 {
  "width": 800,
  "top": 100,
  "left": 200,
  "opacity": 1,
  "zIndex": 4
 },//2
 {
  width: 600,
  top: 70,
  left: 600,
  opacity: 0.8,
  zIndex: 3
 },//3
 {
  "width": 400,
  "top": 20,
  "left": 750,
  "opacity": 0.2,
  "zIndex": 2
 }//4
 ];//其實(shí)就是一個(gè)配置單 規(guī)定了每張圖片的大小位置層級(jí)透明度

 //獲取頁(yè)面上所有的li 讓他們從當(dāng)前的位置 以動(dòng)畫(huà)的效果到指定的位置
 function assign() {
 for (var i = 0; i < lis.length; i++) {
  animate(lis[i], config[i], function () {
  flag = true;//動(dòng)畫(huà)執(zhí)行完成后重新打開(kāi)閥門(mén)
  });
 }
 }

 assign();
 //3.點(diǎn)擊箭頭旋轉(zhuǎn)
 //點(diǎn)擊右箭頭
 arrRight.onclick = function () {
 if (flag) {
  flag = false;//關(guān)閉閥門(mén)
  //把開(kāi)始的元素放到最后
  config.push(config.shift());
  assign();
 }
 };
 //點(diǎn)擊左箭頭
 arrLeft.onclick = function () {
 if (flag) {
  flag = false;
  //把最后的元素放到開(kāi)始
  config.unshift(config.pop());
  assign();
 }

 };
 //4.添加節(jié)流閥
 var flag = true;//表示閥門(mén)是打開(kāi)的

};

本人剛剛開(kāi)始入行前端，希望大佬有什么意見(jiàn)的話(huà)，歡迎給我留言，你們的支持就是我最大的動(dòng)力

精彩專(zhuān)題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

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

您可能感興趣的文章: