原生JS實現旋轉輪播圖+文字內容切換
阿新 • • 發佈:2018-12-12
window.onload = function () { var arr = [ { // 1 width:120, top:11, left:87, opacity:20, zIndex:2 }, { // 2 width:120, top:11, left:237, opacity:40, zIndex:3 }, { // 3 width:144, top:0, left:387, opacity:100, zIndex:4 }, { // 4 width:120, top:11, left:561, opacity:40, zIndex:3 }, { //5 width:120, top:11, left:711, opacity:20, zIndex:2 } ]; //0.獲取元素 var feedbackslide = document.getElementById("feedbackslide"); var feedbackliArr = feedbackslide.getElementsByTagName("li"); var feedbackarrow = feedbackslide.children[1]; var arrowChildren = feedbackarrow.children;var arrowleft=5; //設定一個開閉原則變數,點選以後修改這個值。 var flag = true; move(); //3.把兩側按鈕繫結事件。(呼叫同一個方法,只有一個引數,true為正向旋轉,false為反向旋轉) arrowChildren[0].onclick = function () { if(flag){ flag = false; move(false); } arrowleft++; console.log("left+++",arrowleft) if(arrowleft==1){ document.getElementById("feedstudent").innerText="小嶽嶽2"; }else if(arrowleft==2){ document.getElementById("feedstudent").innerText="張三峰1"; }else if(arrowleft==3){ document.getElementById("feedstudent").innerText="林動5"; }else if(arrowleft==4){ document.getElementById("feedstudent").innerText="令狐沖4"; }else if(arrowleft==5){ document.getElementById("feedstudent").innerText="歐陽常斌3"; arrowleft=0; }else{ document.getElementById("feedstudent").innerText="小嶽嶽2"; arrowleft=1; } } arrowChildren[1].onclick = function () { if(flag){ flag = false; move(true); } arrowleft--; console.log("right---",arrowleft) if(arrowleft==1){ document.getElementById("feedstudent").innerText="小嶽嶽2"; }else if(arrowleft==2){ document.getElementById("feedstudent").innerText="張三峰1"; }else if(arrowleft==3){ document.getElementById("feedstudent").innerText="林動5"; }else if(arrowleft==4){ document.getElementById("feedstudent").innerText="令狐沖4"; }else{ document.getElementById("feedstudent").innerText="歐陽常斌3"; arrowleft=5; } } //4.書寫函式。 function move(bool){ //判斷:如果等於undefined,那麼就不執行這兩個if語句 if(bool === true || bool === false){ if(bool){ arr.unshift(arr.pop()); }else{ arr.push(arr.shift()); } } //在次為頁面上的所有li賦值屬性,利用緩動框架 for(var i=0;i<feedbackliArr.length;i++){ animate(feedbackliArr[i],arr[i], function () { flag = true; }); } } }