原生JS实现旋转轮播图+文字内容切换效果【附源码】
废话不多说,直接上图看效果:
需求: 点击左右按钮实现切换用户图片与信息;
原理: 点击右侧左侧按钮,把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实现旋转轮播图+文字内容切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
赞 (0)