首页
所有分类
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中valueOf函数与toString方法深入理解
Dec 02 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
JavaScript简介
Feb 15 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 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
荷兰购物网站(99) 肯尼亚购物网站(2) 芬兰购物网站(10) 南非购物网站(8) 阿根廷购物网站(9) 意大利购物网站(128) 瑞典购物网站(55) 挪威购物网站(7) 比利时购物网站(33) 丹麦购物网站(22)
You might like
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
yii中widget的用法
2014/12/03 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python冲顶大会 快来答题!
2018/01/17 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
python实现粒子群算法
2020/10/15 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
ruby如何进行集成操作？Ruby能进行多重继承吗？
2013/10/16 面试题
七年级数学教学反思
2014/01/22 职场文书
2014政务公开实施方案
2014/02/19 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
Python爬虫基础初探selenium
2021/05/31 Python
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
JS的深浅复制详细
2021/10/16 Javascript
服务器nginx权限被拒绝解决案例
2022/09/23 Servers
MySQL数据管理操作示例讲解
2022/12/24 MySQL