首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生JS实现旋转轮播图+文字内容切换效果【附源码】

Posted in Javascript onSeptember 29, 2018

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

原生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.3water.com/js/2018/students.rar

总结

以上所述是小编给大家介绍的原生JS实现旋转轮播图+文字内容切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

原生JS实现旋转轮播图+文字内容切换效果【附源码】

- Author -

骑码行天下

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 #Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 #Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 #Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 #Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 #Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 #Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 #Javascript
commit(1) GoFrame(3) filter(1) dockerfile(1) 短信验证码(1) reduce(2) harbor(1) 分布式锁(3) pytz(1) SQLite3(1)
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP Document 代码注释规范
2009/04/13 PHP
全新的PDO数据库操作类php版（仅适用Mysql）
2012/07/22 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
JavaScript 操作键盘的Enter事件（键盘任何事件），兼容多浏览器
2010/10/11 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
[01:38]完美世界DOTA2联赛（PWL）宣传片：第一站
2020/10/26 DOTA
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
YBF Beauty官网：美丽挚友，美国知名彩妆品牌
2020/11/22 全球购物
员工试用期考核自我鉴定
2014/04/13 职场文书
《社戏》教学反思
2014/04/15 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis