廢話不多說，直接上圖看效果：
需求：點擊左右按鈕實現切換用戶圖片與信息；
原理：點擊右側左側按鈕，把3號的樣式給2號，2號的給1號，1號的給5號，5號的給4號，4號的樣式給3號，然后根據現在是第幾張圖片切換成對應的文字；
步驟：
1.讓頁面加載出所有盒子的樣式；
2.把兩側按鈕綁定事件(調用同一個方法，只有一個參數，true為正向旋轉，false為反向旋轉)；
3.書寫函數：操作函數：左按鈕：刪除第一個，添加到最后一個；右按鈕：刪除最后一個，添加到第一個；
4.定義變量，根據對應變量切換對應的文字內容；
代碼事例如下：
HTML代碼：
寫法思路：
1.定義好5張圖片，進行圖片信息切換；
2.書寫好你需要切換的文字內容，定義一個ID；
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>學員信息輪播圖</title> <link rel="stylesheet" href="css/css.css"/> <script src="js/jquery1.0.0.1.js"></script> <script src="js/js.js"></script> </head> <body> <div class="feedbackwrap" id="feedbackwrap"> <div class="feedbackslide" id="feedbackslide"> <ul> <!--五張圖片--> <li><a href="#"><img src="images/1.png" alt=""/></a></li> <li><a href="#"><img src="images/2.png" alt=""/></a></li> <li><a href="#"><img src="images/3.png" alt=""/></a></li> <li><a href="#"><img src="images/4.png" alt=""/></a></li> <li><a href="#"><img src="images/5.png" alt=""/></a></li> </ul> <!--左右切換按鈕--> <div class="feedbackarrow" id="feedbackarrow"> <a href="javascript:;" class="feedbackprev"></a> <a href="javascript:;" class="feedbacknext"></a> </div> </div> <div class="feedbackname"> <p class="p1">學員</p> <p class="p2" id="feedstudent">歐陽常斌3</p> </div> </div> </body> </html>
css代碼：
寫法思路：
1.定義好左右切換按鈕的背景圖片；
2.清除默認樣式；
3.寫好絕對定位，相對定位；
@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;} .feedbackwrap{ width:924px; margin:auto; margin-top: 300px; } .feedbackslide { height:144px; position: relative; } .feedbackslide li{ position: absolute; left:30px; top:0; } .feedbackslide li img{ width:100%; box-shadow:#d6d4d3 0px 0px 20px; } .feedbackarrow{ opacity: 1; } .feedbackprev,.feedbacknext{ width:27px; height:50px; position: absolute; top:50%; margin-top:-25px; background: url(../images/leftblue.png) no-repeat; z-index: 99; } .feedbacknext{ right:0; background-image: url(../images/rightblue.png); } .feedbackname{ width: 100%; margin-top: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .feedbackname .p1{ font-size: 22px; color: #333; margin-bottom: 10px; } .feedbackname .p2{ font-size: 18px; color: #666; }
js代碼：
寫法思路：
1.定義一個數組，方便切換圖片的樣式，進行動畫效果；
2.獲取元素，定義名稱，方便用取；
3.把兩側按鈕綁定事件。(調用同一個方法，只有一個參數，true為正向旋轉，false為反向旋轉)；
4.在次為頁面上的所有li賦值屬性，利用緩動框架；
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; }); } } }
動畫效果js代碼如下：
function show(ele){ ele.style.display = "block"; } /** * 獲取元素樣式兼容寫法 * @param ele * @param attr * @returns {*} */ function getStyle(ele,attr){ if(window.getComputedStyle){ return window.getComputedStyle(ele,null)[attr]; } return ele.currentStyle[attr]; } //參數變為3個 //參數變為3個 function animate(ele,json,fn){ //先清定時器 clearInterval(ele.timer); ele.timer = setInterval(function () { //開閉原則 var bool = true; //遍歷屬性和值，分別單獨處理json //attr == k(鍵) target == json[k](值) for(var k in json){ //四部 var leader; //判斷如果屬性為opacity的時候特殊獲取值 if(k === "opacity"){ leader = getStyle(ele,k)*100 || 1; }else{ leader = parseInt(getStyle(ele,k)) || 0; } //1.獲取步長 var step = (json[k] - leader)/10; //2.二次加工步長 step = step>0?Math.ceil(step):Math.floor(step); leader = leader + step; //3.賦值 //特殊情況特殊賦值 if(k === "opacity"){ ele.style[k] = leader/100; //兼容IE678 ele.style.filter = "alpha(opacity="+leader+")"; //如果是層級，一次行賦值成功，不需要緩動賦值 //為什么？需求！ }else if(k === "zIndex"){ ele.style.zIndex = json[k]; }else{ ele.style[k] = leader + "px"; } //4.清除定時器 //判斷: 目標值和當前值的差大於步長，就不能跳出循環 //不考慮小數的情況：目標位置和當前位置不相等，就不能清除清除定時器。 if(json[k] !== leader){ bool = false; } } //只有所有的屬性都到了指定位置，bool值才不會變成false； if(bool){ clearInterval(ele.timer); //所有程序執行完畢了，現在可以執行回調函數了 //只有傳遞了回調函數，才能執行 if(fn){ fn(); } } },5); } //獲取屏幕可視區域的寬高 function client(){ if(window.innerHeight !== undefined){ return { "width": window.innerWidth, "height": window.innerHeight } }else if(document.compatMode === "CSS1Compat"){ return { "width": document.documentElement.clientWidth, "height": document.documentElement.clientHeight } }else{ return { "width": document.body.clientWidth, "height": document.body.clientHeight } } }
如果復制代碼不方便，博主百度網盤分享鏈接：鏈接: https://pan.baidu.com/s/1CEez4PN5fh61PC-vud96_w 提取碼: t6rh
附加：無間隙自動輪播圖：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>圖片輪播</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> #box { width:100%; height:80%; overflow:hidden; margin-top: 200px; } #box ul { white-space:nowrap; box-sizing:border-box; padding:0; margin:0; } #box ul>li { display:inline-block; width:auto; height:100%; padding:0 1px; box-sizing:border-box; } #box ul>li>img { height:100%; width:235px; margin:0; padding:0; } </style> </head> <body> <div id="box"> <ul> <li><img src="http://www.jq22.com/img/cs/500x500-1.png"></li> <li><img src="http://www.jq22.com/img/cs/500x500-2.png"></li> <li><img src="http://www.jq22.com/img/cs/500x500-3.png"></li> <li><img src="http://www.jq22.com/img/cs/500x500-4.png"></li> <li><img src="http://www.jq22.com/img/cs/500x500-5.png"></li> <li><img src="http://www.jq22.com/img/cs/500x500-6.png"></li> <li><img src="http://www.jq22.com/img/cs/500x500-7.png"></li> <li><img src="http://www.jq22.com/img/cs/500x500-8.png"></li> </ul> </div> <script> window.onload = function() { var box = document.querySelector("#box"); var ul = document.querySelector("#box ul"); var sW = ul.scrollWidth; ul.innerHTML += ul.innerHTML; ul.style.width = ul.scrollWidth; var v = 0; setInterval(() => { v++; if (v > sW) { v = 1; } ul.style.transform = "translateX(" + -v + "px)"; }, 20); } var isFirefox = /Firefox/i.test(navigator.userAgent) ? true : false; var unMouseBtn = function(e) { var e = e || window.event; if (e.wheelDelta && e.ctrlKey) { //IE/Opera/Chrome e.wheelDelta±120 e.preventDefault ? e.preventDefault() : e.returnValue = false; } else if (e.detail && e.ctrlKey) { //Firefox e.detail±3 e.preventDefault ? e.preventDefault() : e.returnValue = false; } }; var mousewheelevt = isFirefox ? "DOMMouseScroll" : "mousewheel"; if (document.attachEvent) { //IE/Opera/Chrome document.attachEvent("on" + mousewheelevt, unMouseBtn); } else if (document.addEventListener) { //Firefox document.addEventListener(mousewheelevt, unMouseBtn, false); } var unCtrl = function(e) { var e = e || window.event; var isFirefox = (/Firefox/i.test(navigator.userAgent)) ? true : false; //Firefox var code = isFirefox ? "109,107,173,61" : "109,107,189,187"; // + - if (e.ctrlKey && code.indexOf(e.keyCode) != -1) { e.preventDefault ? e.preventDefault() : e.returnValue = false; } }; document.onkeydown = unCtrl; </script> </body> </html>
總結：如果demo出現什么問題或者你書寫過程中遇到什么麻煩，歡迎在博文下面留言，博主將一一解答，轉載請注明出處，謝謝，請珍惜別人的勞動成果！！！