JS實現(xiàn)旋轉(zhuǎn)木馬輪播案例
本文實例為大家分享了JS實現(xiàn)旋轉(zhuǎn)木馬輪播的具體代碼,供大家參考,具體內(nèi)容如下
效果:
每張圖片排列的位置是以中間為對稱的。圖片大小,透明度不相同,但對稱的圖片的樣式是相同的,呈現(xiàn)出一種立體的輪播效果。
輪播動態(tài)效果圖:
先看看代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋轉(zhuǎn)木馬輪播圖</title> <link rel="stylesheet" href="css/css.css" /> </head> <body> <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:void(0);" class="prev" id="arrLeft"></a> <a href="javascript:void(0);" class="next" id="arrRight"></a> </div> </div> </div> </body> <script> //定義一個數(shù)組 使用絕對定位來設(shè)置五個li的位置 var config = [ { width: 400, top: 20, left: 50, opacity: 0.2, zIndex: 2 }, { width: 600, top: 70, left: 0, opacity: 0.8, zIndex: 3 }, { width: 800, top: 100, left: 200, opacity: 1, zIndex: 4 }, { width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3 }, { width: 400, top: 20, left: 750, opacity: 0.2, zIndex: 2 } ]; //頁面加載的事件 window.onload = function () { var flag = true;//假設(shè)所有的動畫執(zhí)行完畢了 //圖片散開 var list = my$("slide").getElementsByTagName("li"); function assgin() { for (var i=0;i<list.length;i++) { //設(shè)置每個li,都要把寬 層級 透明度 left top到達(dá)指定的目標(biāo)位置 animate(list[i],config[i],function () { flag = true; }); } } assgin(); //給按鈕設(shè)置點擊事件 //右邊按鈕 圖片順時針旋轉(zhuǎn) 數(shù)組的第一個元素放在最末尾 /* pop() 刪除最后面的元素 push() 在末尾添加元素 shift() 刪除最前面的元素 unshift() 將元素添加到數(shù)組的最前面 */ my$("arrRight").onclick = function(){ if (flag){ flag = false; config.push(config.shift()); assgin();//重新分配 } }; //左邊按鈕 圖片逆時針旋轉(zhuǎn) 數(shù)組的最后一個元素放在開始的位置 my$("arrLeft").onclick = function(){ if (flag){ flag = false; config.unshift(config.pop()); assgin();//重新分配 } }; //鼠標(biāo)進入 左右焦點的div顯示 my$("wrap").onmouseover = function () { animate(my$("arrow"),{"opacity":1}); }; //鼠標(biāo)離開 左右焦點的div隱藏 my$("wrap").onmouseout = function () { animate(my$("arrow"),{"opacity":0}); }; }; //根據(jù)id獲取元素 function my$(id) { return document.getElementById(id); } //獲取任意一個元素的任意一個樣式屬性的值 function getAttrValue(element,attr) { return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0; } //動畫 function animate(element,json,fn) { clearInterval(element.timeId); element.timeId=setInterval(function () { var flag=true;//假設(shè)都達(dá)到了目標(biāo) for(var attr in json){ if(attr=="opacity"){//判斷屬性是不是opacity var current= getAttrValue(element,attr)*100; //每次移動多少步 var target=json[attr]*100;//直接賦值給一個變量,后面的代碼都不用改 var step=(target-current)/10;//(目標(biāo)-當(dāng)前)/10 step=step>0?Math.ceil(step):Math.floor(step); current=current+step; element.style[attr]=current/100; }else if(attr=="zIndex"){//判斷屬性是不是zIndex element.style[attr]=json[attr]; }else{//普通的屬性 //獲取當(dāng)前的位置----getAttrValue(element,attr)獲取的是字符串類型 var current= parseInt(getAttrValue(element,attr))||0; //每次移動多少步 var target=json[attr];//直接賦值給一個變量,后面的代碼都不用改 var step=(target-current)/10;//(目標(biāo)-當(dāng)前)/10 step=step>0?Math.ceil(step):Math.floor(step); current=current+step; element.style[attr]=current+"px"; } if(current!=target){ flag=false;//如果沒到目標(biāo)結(jié)果就為false } } if(flag){//結(jié)果為true clearInterval(element.timeId); if(fn){//如果用戶傳入了回調(diào)的函數(shù) fn(); //就直接的調(diào)用, } } console.log("target:"+target+"current:"+current+"step:"+step); },10); } </script> </html>
css.css樣式:
@charset "UTF-8"; /*初始化 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; } .prev,.next{ width:76px; height:112px; position: absolute; top:50%; margin-top:-56px; background: url(../images/prev.png) no-repeat; z-index: 99; } .next{ right:0; background-image: url(../images/next.png); }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js遍歷json對象所有key及根據(jù)動態(tài)key獲取值的方法(必看)
下面小編就為大家?guī)硪黄猨s遍歷json對象所有key及根據(jù)動態(tài)key獲取值的方法(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03js中通過getElementsByName訪問name集合對象的方法
下面小編就為大家?guī)硪黄猨s中通過getElementsByName訪問name集合對象的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10js數(shù)值和和字符串進行轉(zhuǎn)換時可以對不同進制進行操作
這篇文章主要介紹了js數(shù)值和和字符串進行轉(zhuǎn)換時可以對不同進制進行操作,需要的朋友可以參考下2014-03-03