首页
所有分类
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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
使用 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
list(1) enumerate(1) zip(1) gevent(1) greenlet(1) csv(4) find(1) 进销存(1) 自动化(1) pytest(3)
You might like
10个实用的PHP代码片段
2011/09/02 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
深入理解JavaScript系列（29）：设计模式之装饰者模式详解
2015/03/03 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
ionic使用angularjs表单验证（模板验证）
2018/12/12 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python opencv读mp4视频的实例
2018/12/07 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Django项目创建到启动详解（最全最详细）
2019/09/07 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
方太官方网上商城：销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
英国儿童图书网站：Scholastic
2017/03/26 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站：Yankee Candle
2018/12/12 全球购物
全球最大化妆品零售网站：SkinStore
2020/10/24 全球购物
物流专业大学应届生求职信
2013/11/03 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
犯错检讨书
2014/02/21 职场文书
家长对老师的评语
2014/04/18 职场文书
大学毕业生推荐信
2014/07/09 职场文书
导游词之桂林山水
2019/09/20 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
MySQL的存储过程和相关函数
2022/04/26 MySQL