原生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实现旋转轮播图+文字内容切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2018-09-29

JS实现按钮颜色切换效果

本文实例为大家分享了使用参数函数实现按钮颜色切换的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="btn1" onclick=&qu

JS实现的按钮点击颜色切换功能示例

本文实例讲述了JS实现的按钮点击颜色切换功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击切换按钮颜色</title> </head> <body> <button id=

原生js实现旋转木马轮播图效果

话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马特效</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} #demo{width:1200px;mar

JavaScript实现旋转轮播图

最近一直在学习JavaScript,然后看到旋转轮播图的案例,就尝试着用js做了一个简单的轮播图,因为无法显示动态效果,所以就放个截图: 这个效果是这样的:一共有7张图片,它们会自动地向左滑动,然后左右箭头也可以控制轮播图的左滑和右滑,同时,如果鼠标停在图片上,那么轮播图会停止自动滑动,当鼠标移开时,将会继续向左轮播. 首先,我这里封装了两个函数(因为暂且还没有学jQuery,所以用了封装函数的方法来实现),第一个函数是$函数,调用可以获取html中的元素,代码如下: `function $(s

JS实现点击循环切换显示内容的方法

本文实例讲述了JS实现点击循环切换显示内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击循环切换内容</title> <style> a { cursor: pointer; colo

JS实现点击链接切换显示隐藏内容的方法

本文实例讲述了JS实现点击链接切换显示隐藏内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击链接切换显示隐藏内容</title> <style> a { cursor: pointer

js鼠标点击图片切换效果实现代码

本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:

js鼠标点击图片切换效果代码分享

本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

js图片模糊切换显示特效的方法

本文实例讲述了js图片模糊切换显示特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>一款图片模糊切换显示效果</title> <body> <script language="JavaScript1.1"> <!-- var slidespeed=3000 var slideimages=new Array("/images/m01.jpg",&q

使用JavaScript实现点击循环切换图片效果

废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <script> var i = 1; function nextImg(){ i++; //步骤2:获取页面元素 var next = document.getElementById("

JS实现点击按钮获取页面高度的方法

本文实例讲述了JS实现点击按钮获取页面高度的方法.分享给大家供大家参考,具体如下: 这是一个JavaScript特效代码,点击获取网页高度,在ie6下实现position-fixed的效果,另外针对遮罩的问题(大概是做lightBox吧),个人觉得纯css法(不包括其显示/隐藏)将更适合. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-btn-web-height-codes/ 具体代码如下: <!DOCTYPE html P

vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

html代码: <section class="container page-home"> <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="item in items"> <div class="col-1-2 right&q

JavaScript实现点击按钮切换网页背景色的方法

本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript用按钮随意变换背景颜色,每点击一下按钮,就可以随机改变一种网页背景颜色.颜色值事先是保存在JS的数组里,你在代码里会发现他们,若不想要某个颜色,就替换掉即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/ 具体代码如下: <!DOCTYPE HTML

JavaScript实现点击文字切换登录窗口的方法

本文实例讲述了JavaScript实现点击文字切换登录窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款动画切换层窗口的特效,点击不同的登录用户会切换到不同的登录窗口,窗口内的内容可以是不一样的,是比较实用的一款代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JAVASC