废话不多说，直接上图看效果：
需求：点击左右按钮实现切换用户图片与信息；
原理：点击右侧左侧按钮，把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 120, top:11, left:87, opacity:20, zIndex:2 }, { // 2 120, top:11, left:237, opacity:40, zIndex:3 }, { // 3 144, top:0, left:387, opacity:100, zIndex:4 }, { // 4 120, top:11, left:561, opacity:40, zIndex:3 }, { //5 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出现什么问题或者你书写过程中遇到什么麻烦，欢迎在博文下面留言，博主将一一解答，转载请注明出处，谢谢，请珍惜别人的劳动成果！！！