原生JS-旋轉木馬
今天寫一個原生JS寫的旋轉木馬JS效果。
實現原理：
1.建立一個數組給每一張圖片寫對應的z-index，opacity，top，width；
2.實現旋轉的操作是把建造的數組里面的第一組值放到最后一組，點下按鈕就執行一次。
顯示效果圖：

html布局：

<div class="wrap" id="wrap"><div class="slide" id="slide"><ul><li><a href=""><img src="images/logo.png" width="900" height="500" alt=""></a></li><li><a href=""><img src="images/slide.jpg" width="900" height="500" alt=""></a></li><li><a href=""><img src="images/slide2.jpg" width="900" height="500" alt=""></a></li><li><a href=""><img src="images/i1.jpg" width="900" height="500" alt=""></a></li><li><a href=""><img src="images/sto.jpg" width="900" height="500" alt=""></a></li></ul><div class="arrow" id="arrow"><a href="javascript:;" id="arrLeft" class="prev"></a><a href="javascript:;" id="arrRight" class="next"></a></div></div> </div>

css樣式：

* {margin: 0;padding: 0;}ul {list-style: none;}.wrap {width: 1200px;margin: 100px auto;}.slide {height: 500px;position: relative;width: 1200px;}.slide ul li {position: absolute;top: 0;left: 0;z-index: 1;}.slide li img {width: 100%;}.arrow {position: absolute;width: 100%;top: 50%;opacity: 0;z-index: 3;}.prev,.next {position: absolute;height: 110px;width: 110px;border-radius: 50%;top: 50%;//margin-top: -56px;overflow: hidden;text-decoration: none;}.prev{left: 0;background: url("images/slider-icons.png") no-repeat left top;}.next{right: 0;background: url("images/slider-icons.png") no-repeat right top;}

JS部分：
接下來我們先把對應圖片的樣式存放到一個數組里面。

//寫每張圖片對應的樣式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 list=my$("slide").getElementsByTagName("li"); //拿到所有lifunction assign() { //分配函數for (var i=0;i<list.length;i++){animate(list[i],config[i],function () {flag=true;});}}assign();

鼠標進入和離開會有有左右箭頭的顯示和隱藏，點擊按鈕旋轉的原理即改變數組第一個放在最后或把最后一組放在第一個。其中的flag為控制點擊按鈕時確保一組動畫完成后才能繼續執行下一個旋轉動畫。

//鼠標進入，左右焦點的div顯示my$("wrap").onmouseover=function () {animate(my$("arrow"),{"opacity":1});};//鼠標離開，左右焦點的div隱藏my$("wrap").onmouseout=function () {animate(my$("arrow"),{"opacity":0});};//點擊右邊按鈕事件my$("arrRight").onclick=function () {if (flag){flag=false;config.push(config.shift()); //把第一組值放到最后一組assign();}};//點擊左邊按鈕事件my$("arrLeft").onclick=function () {if (flag){flag=false;config.unshift(config.pop()); //把最后一組值放到第一組assign();}};};

完整JS代碼：

<script>//變速動畫函數function animate(element, json, fn) {clearInterval(element.timeId); //清理定時器element.timeId = setInterval(function () {var flag = true; //假設默認為當前值已經等于目標值for (var arrt in json) {if (arrt == "opacity") { //如果屬性值為opacityvar current = getStyle(element, arrt) * 100; //current和target先擴大100倍target = json[arrt] * 100;var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);current += step;element.style[arrt] = current / 100; //運算完后縮小100倍} else if (arrt == "zIndex") { //如果屬性值為zindexelement.style[arrt] = json[arrt];} else { //普通屬性var current = parseInt(getStyle(element, arrt));target = json[arrt];var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step); //step大于零向上取整，小于零向下取整current += step;element.style[arrt] = current + "px";}if (current != target) {flag = false;}}if (flag) { //只有所有屬性的當前值已經等于目標值，才清理定時器clearInterval(element.timeId);if (fn) { //回調函數fn();}}console.log("當前位置：" + current + "目標位置：" + target + " 移動步數：" + step); //測試函數}, 20);}function getStyle(element, arrt) {return window.getComputedStyle ? window.getComputedStyle(element, null)[arrt] : element.currentStyle[arrt];}function my$(id) {return document.getElementById(id);}//寫每張圖片對應的樣式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 flag=true; //假設動畫全部執行完畢-----鎖//頁面加載的事件window.onload=function () {//1---散開圖片var list=my$("slide").getElementsByTagName("li"); //拿到所有lifunction assign() { //分配函數for (var i=0;i<list.length;i++){animate(list[i],config[i],function () {flag=true;});}}assign();//鼠標進入，左右焦點的div顯示my$("wrap").onmouseover=function () {animate(my$("arrow"),{"opacity":1});};//鼠標離開，左右焦點的div隱藏my$("wrap").onmouseout=function () {animate(my$("arrow"),{"opacity":0});};//點擊右邊按鈕事件my$("arrRight").onclick=function () {if (flag){flag=false;config.push(config.shift()); //把第一組值放到最后一組assign();}};//點擊左邊按鈕事件my$("arrLeft").onclick=function () {if (flag){flag=false;config.unshift(config.pop()); //把最后一組值放到第一組assign();}};};</script>

總結

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

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