怎么用javascript實現旋轉木馬

本篇內容主要講解“怎么用javascript實現旋轉木馬”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用javascript實現旋轉木馬”吧!

javascript實現旋轉木馬的方法：1、創建好HTML基礎代碼文件；2、初始化reset；3、通過js代碼“function animate(obj, json, fn) {...}”方法實現旋轉木馬效果即可。

本文操作環境：windows7系統、javascript1.8.5版，DELL G3電腦。

javascript怎么實現旋轉木馬?

JavaScript實現旋轉木馬輪播圖的具體代碼，供大家參考，具體內容如下：

html代碼段

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

<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, h2, h3, h4, h5, h6, h7, 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代碼段：

這個是封裝好的的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函數，獲取每一個對象，設置鼠標經過事件，鼠標經過輪播圖 讓箭頭漸漸地顯示 鼠標離開漸漸消失；然后.設置圖片位置(給對象賦值)

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.鼠標經過輪播圖 讓箭頭漸漸地顯示 鼠標離開漸漸消失
 wrap.onmouseover = function () {
 animate(arrow, {"opacity": 1});
 };
 wrap.onmouseout = function () {
 animate(arrow, {"opacity": 0});
 };
 //2.設置圖片位置
 
 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
 ];//其實就是一個配置單 規定了每張圖片的大小位置層級透明度
 
 //獲取頁面上所有的li 讓他們從當前的位置 以動畫的效果到指定的位置
 function assign() {
 for (var i = 0; i < lis.length; i++) {
  animate(lis[i], config[i], function () {
  flag = true;//動畫執行完成后重新打開閥門
  });
 }
 }
 
 assign();
 //3.點擊箭頭旋轉
 //點擊右箭頭
 arrRight.onclick = function () {
 if (flag) {
  flag = false;//關閉閥門
  //把開始的元素放到最后
  config.push(config.shift());
  assign();
 }
 };
 //點擊左箭頭
 arrLeft.onclick = function () {
 if (flag) {
  flag = false;
  //把最后的元素放到開始
  config.unshift(config.pop());
  assign();
 }
 
 };
 //4.添加節流閥
 var flag = true;//表示閥門是打開的
 
};

到此，相信大家對“怎么用javascript實現旋轉木馬”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！