废话不多说，直接上图看效果：
需求： 点击左右按钮实现切换用户图片与信息；
原理： 点击右侧左侧按钮，把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 href="https://www.jb51.net/css/css.css" /> <script src="https://www.jb51.net/js/jquery1.0.0.1.js"></script> <script src="https://www.jb51.net/js/js.js"></script> </head> <body> <div> <div> <ul> <!--五张图片--> <li><a href="#" ><img src="https://www.jb51.net/images/1.png" alt=""/></a></li> <li><a href="#" ><img src="https://www.jb51.net/images/2.png" alt=""/></a></li> <li><a href="#" ><img src="https://www.jb51.net/images/3.png" alt=""/></a></li> <li><a href="#" ><img src="https://www.jb51.net/images/4.png" alt=""/></a></li> <li><a href="#" ><img src="https://www.jb51.net/images/5.png" alt=""/></a></li> </ul> <!--左右切换按钮--> <div> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> <div> <p>学员</p> <p>欧阳常斌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代码如下：