废话不多说，直接上图看效果：
需求： 点击左右按钮实现切换用户图片与信息；
原理： 点击右侧左侧按钮，把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" rel="external nofollow" /> <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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/1.png" alt=""/></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/2.png" alt=""/></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/3.png" alt=""/></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/4.png" alt=""/></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/5.png" alt=""/></a></li> </ul> <!--左右切换按钮--> <div class="feedbackarrow" id="feedbackarrow"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="feedbackprev"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" 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 } }}下面给大家奉上源码下载：http://demo.jb51.net/js/2018/students.rar
总结
以上所述是小编给大家介绍的原生JS实现旋转轮播图+文字内容切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
- JavaScript实现旋转轮播图
- 原生js实现旋转木马轮播图效果
- JS实现的按钮点击颜色切换功能示例
- JS实现点击循环切换显示内容的方法
- JS实现按钮颜色切换效果
Peter-Zhu
大家讲道理
