原生射流研究…实现旋转轮播图文字内容切换效果【附源码】

废话不多说，直接上图看效果：

需求：点击左右按钮实现切换用户图片与信息；

原理：点击右侧左侧按钮，把3号的样式给2号，2号的给一号，1号的给5号，5号的给四号，4号的样式给3号，然后根据现在是第几张图片切换成对应的文字；

步骤：

1.让页面加载出所有盒子的样式；

2.把两侧按钮绑定事件（调用同一个方法，只有一个参数，真的为正向旋转，假的为反向旋转);

3.书写函数：操作函数：左按钮：删除第一个，添加到最后一个；右按钮：删除最后一个，添加到第一个；

4.定义变量，根据对应变量切换对应的文字内容；

代码事例如下：

超文本标记语言代码：

写法思路：

1.定义好5张图片，进行图片信息切换；

2.书写好你需要切换的文字内容，定义一个身份证；

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '标题学员信息轮播图/title link rel='样式表href='css/css.css' rel='外部“no follow ”/脚本src=' http : js/jquery 1。0 .0 .1 .js /脚本src=' http : js/js。js /脚本/head body div class='反馈包装' id='反馈包装' div class='反馈幻灯片' id='反馈幻灯片' ul！-五张图片-lia href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http : images/1。png ' alt=' '//a/Li lia href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http : images/2-左右切换按钮-div class='反馈箭头' id='反馈箭头' a href=' JavaScript :rel='外部无跟随' rel='外部无跟随' class='反馈prev '/a href=' JavaScript :rel='外部不跟随' rel='外部不跟随' class='下一个反馈'/a/div/div class='反馈名称' p class=' P1 '学员/p p class='p2' id='feedstudent '欧阳常斌3/p /div /div/body/htmlcss代码：

写法思路：

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:0padding:0 }正文，按钮，输入，选择，textarea{font:12px/1.5 '微软雅黑','微软雅黑，SimSun，'宋体，无衬线字体；color: # 666}ol，ul { list-style : none } a { text-decision : none }字段集，img { border:0垂直对齐：顶；}a、输入、按钮、选择、textarea { outline:none}a、按钮{ cursor:pointer}。反馈包装{ width :924 pxmargin : auto边距-top : 300 px；}.反馈{ height:144px相对位置：}.反馈滑动Li { position : absolute eleft :30 pxtop :0 }。反馈滑动Li img {宽度：100%；箱形阴影： # d6d 4d 3 0px 0px 20px}.反馈箭头{ opa city 3360 1；}.反馈。反馈{宽度：27像素高度：50 px绝对位置：前：50%；边距-top :-25px；背景：网址(./images/leftblue.png)不重复；z指数： 99；}.反馈next { right:0背景-图像：网址（./图像/右蓝色。巴布亚新几内亚)；}.反馈名称{宽度： 100%；边距-top : 26px；显示： flex flex-方向：柱；align-items:居中；正义-内容：中心；}.反馈名称。P1 { font size : 22px；颜色： # 333边距-底部： 10px}.反馈名称。p2 { font-size : 18pxcolor: # 666}js代码：

写法思路：

1.定义一个数组，方便切换图片的样式，进行动画效果；

2.获取元素，定义名称，方便用取；

3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，真的为正向旋转，假的为反向旋转);

4.在次为页面上的所有里赋值属性，利用缓动框架；

窗户。onload=function(){ var arr=[{//1 width :120，top:11，left:87，opa city 336020，zIndex:2 }，{ //2 width:120，top:11，left:237，opa city 336040，zindex 33603 }，{ //3 width:144，}获取元素var反馈幻灯片=文档。getelementbyid('反馈幻灯片')；var feedbackliar=feedbackslide。getelementsbytagname(' Li ')；var反馈箭头=反馈幻灯片。孩子[1]；var箭头子项=反馈箭头。儿童；定义变量箭头左=5；//设置一个开闭原则变量，点击以后修改这个值定义变量标志=真；move()；//3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，真的为正向旋转，假的为反向旋转)箭头儿童[0]。onclick=function(){ if(flag){ flag=false；移动（假);}箭头向左；console.log('左'，箭头左)if(箭头left==1){ document。getelementbyid(' feed student ').' innerText='小岳岳2';} else if(向左箭头==2){ document。getelementbyid(' feed student ').' innerText='张三峰1';} else if(向左箭头==3){ document。getelementbyid(' feed student ').' innerText='林动5';} else if(向左箭头==4){ document。getelementbyid(' feed student ').' innerText='令狐冲4';} else if(向左箭头==5){ document。getelementbyid(' feed student ').' innerText='欧阳常斌3';箭头left=0；} else { document。getelementbyid(' feed student ').' innerText='小岳岳2';箭头左=1；} } ArroChildren[1]。onclick=function(){ if(flag){ flag=false；移动（真);}箭头向左-;console.log('right -'，向左箭头)if(向左箭头==1){ document。getelementbyid(' feed student ').' innerText='小岳岳2';} else if(向左箭头==2){ document。getelementbyid(' feed student ').' innerText='张三峰1';} else if(向左箭头==3){ document。getelementbyid(' feed student ').' innerText='林动5';} else if(向左箭头==4){ document。getelementbyid(' feed student ').' innerText='令狐冲4';} else { document。getelementbyid(' feed student ').' innerText='欧阳常斌3';箭头左侧=5;} } //4.书写函数函数move(bool){ //判断：如果等于未定义，那么就不执行这两个如果语句if(bool===true | | bool===false){ if(bool){ arr。unshift(arr。pop())；} else { arr。推动(arr。shift())；} } //在次为页面上的所有里赋值属性，利用缓动框架for(var I=0；ifeedbackliar . lengthi){ animate(Featariar[I]，Arr[i]，function(){ flag=true；});} }}动画效果射流研究…代码如下：

函数show(ele){ ele . style . display=' block '；}/* * *获取元素样式* @ paramele * @ paramattr * @返回{ * } */函数getstyle (ele，attr){ if(window . getcomputed style){ return window . getcomputed style(ele，null)[attr]；}返回ele . CurrentStyle[attr]；}//参数变为3//参数变为3函数animate (ele，JSON，fn){//清除timer clearInterval(ele . timer)；ele . timer=set interval(function(){//open closed principle var bool=true；//遍历属性和值，分别处理JSON//attr==k(key)target==JSON[k](value)for(JSON中的var k){//四个varleaders//判断属性是否为不透明度，取值if (k=='不透明度'){leader=getstyle (ele，k)* 100 | | 1；} else { leader=ParSeint(GetStyle(ele，k))| | 0；} //1.get step var step=(JSON[k]-leader)/10；//2.步骤=步骤0？math . ceil(step): path . floor(step)；领导者=领导者步骤；//3.赋值//特殊情况赋值if (k=='不透明度'){ele。style[k]=leader/100；//兼容ie678ele.style.filter=' alpha(不透明度=' 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 . inner height！==未定义){返回{ 'width': window.innerWidth，' Height ' : window . inner height}} else if(document.compat mode==' css1 compat '){返回{ ' width ' : document . document element . client width，' Height ' : document . document element . client Height } } else {返回{ ' width ' 3: document . body . client width，Height } }以下是来源

摘要

以上是边肖介绍的实现旋转轮播的文字内容切换效果的原创JS，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！