window.onload = function () {var flag = true;//表示節流閥是打開的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];//其實就是一個配置單 規定了每張圖片的大小位置層級透明度//找人var wrap = document.getElementById("wrap");var slide = document.getElementById("slide");var ul = slide.children[0];var lis = ul.children;var arrow = document.getElementById("arrow");var arrLeft = document.getElementById("arrLeft");var arrRight = document.getElementById("arrRight");//alert("加載成功");//鼠標經過盒子 讓箭頭 漸漸地 顯示出來wrap.onmouseover = function () {animate(arrow, {"opacity": 1});};//離開盒子漸漸隱藏wrap.onmouseout = function () {animate(arrow, {"opacity": 0});};function assign() {//讓所有的li 按照配置單 漸漸地 各就各位for (var i = 0; i < lis.length; i++) {// animate(lis[i], config[i], function () {flag = true;//動畫執行完成后 讓falg為true 打開節流閥 });}}assign();//3.點擊箭頭 實現旋轉//點擊右箭頭 讓配置單 把最前的放到最后arrRight.onclick = function () {if (flag) {//如果節流閥是打開的 才能執行動畫flag = false;//只要執行了 就把節流閥先關閉//arr.push(arr.shift()); config.push(config.shift());//然后還要讓每一個li 根據新生成的配置單 重新從當前位置跑到新的位置 assign();}};arrLeft.onclick = function () {//把最后的元素放到最前//arr.unshift(arr.pop()); config.unshift(config.pop());assign();};//4.節流閥 點擊箭頭后就不能再點擊了 當前動畫執行完成后 才能再點擊 };//animate.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];} }

?

轉載于:https://www.cnblogs.com/lsy0403/p/5892548.html

總結

以上是生活随笔為你收集整理的旋转木马特效代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。