首页
所有分类
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 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
js函数排序的实例代码
Jul 01 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
深入学习jQuery Validate表单验证（二）
Jan 18 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
node实现的爬虫功能示例
May 04 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
js实现3D旋转相册
Aug 02 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
并发(8) el-table(1) 脚手架(2) frozenset(1) Mybatis-Plus(3) create(1) Next.js(1) set(1) TableField(1) SingleFlight(2)
You might like
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php函数连续调用实例分析
2015/07/30 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
详解javascript 变量提升（Hoisting）
2019/03/12 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python读写unicode文件的方法
2015/07/10 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
美国内衣品牌：Leonisa
2016/08/14 全球购物
波兰最大的宠物用品网上商店：FERA.PL
2019/08/11 全球购物
2014年企业工会工作总结
2014/11/12 职场文书
元宵节寄语大全
2015/02/27 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
欠款起诉书范文
2015/05/19 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python