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

需求：点击左右按钮实现切换用户图片与信息；

原理：点击右侧左侧按钮，把3号的样式给2号，2号的给1号，1号的给5号，5号的给4号，4号的样式给3号，然后根据现在是第几张图片切换成对应的文字；

步骤：

1.让页面加载出所有盒子的样式；

2.把两侧按钮绑定事件(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)；

3.书写函数：操作函数：左按钮：删除第一个，添加到最后一个；右按钮：删除最后一个，添加到第一个；

4.定义变量，根据对应变量切换对应的文字内容；

代码事例如下：


HTML代码：

写法思路：

1.定义好5张图片，进行图片信息切换；

2.书写好你需要切换的文字内容，定义一个ID；

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>学员信息轮播图</title>
  6.     <link rel="stylesheet" href="css/css.css"/>
  7.     <script src="js/jquery1.0.0.1.js"></script>
  8.     <script src="js/js.js"></script>
  9. </head>
  10. <body>
  11.  
  12.     <div class="feedbackwrap" id="feedbackwrap">
  13.        <div class="feedbackslide" id="feedbackslide">
  14.            <ul>
  15.                <!--五张图片-->
  16.                <li><a href="#"><img src="data:images/1.png" alt=""/></a></li>
  17.                <li><a href="#"><img src="data:images/2.png" alt=""/></a></li>
  18.                <li><a href="#"><img src="data:images/3.png" alt=""/></a></li>
  19.                <li><a href="#"><img src="data:images/4.png" alt=""/></a></li>
  20.                <li><a href="#"><img src="data:images/5.png" alt=""/></a></li>
  21.            </ul>
  22.            <!--左右切换按钮-->
  23.            <div class="feedbackarrow" id="feedbackarrow">
  24.                <a href="javascript:;" class="feedbackprev"></a>
  25.                <a href="javascript:;" class="feedbacknext"></a>
  26.            </div>
  27.        </div>
  28.        <div class="feedbackname">
  29.               <p class="p1">学员</p>
  30.               <p class="p2" id="feedstudent">欧阳常斌3</p>
  31.        </div>
  32.     </div>
  33.  
  34. </body>
  35. </html>

css代码：

写法思路：

1.定义好左右切换按钮的背景图片；

2.清除默认样式；

3.写好绝对定位，相对定位；

  1. @charset "UTF-8";
  2. /*初始化  reset*/
  3. 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:;padding:}
  4. body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
  5. ol,ul{list-style:none}
  6. a{text-decoration:none}
  7. fieldset,img{border:;vertical-align:top;}
  8. a,input,button,select,textarea{outline:none;}
  9. a,button{cursor:pointer;}
  10.  
  11. .feedbackwrap{
  12.     width:924px;
  13.     margin:auto;
  14.     margin-top: 300px;
  15. }
  16.  
  17. .feedbackslide {
  18.     height:144px;
  19.     position: relative;
  20. }
  21.  
  22. .feedbackslide li{
  23.     position: absolute;
  24.     left:30px;
  25.     top:;
  26. }
  27.  
  28. .feedbackslide li img{
  29.     width:100%;
  30.     box-shadow:#d6d4d3 0px 0px 20px;
  31. }
  32.  
  33. .feedbackarrow{
  34.     opacity:;
  35. }
  36.  
  37. .feedbackprev,.feedbacknext{
  38.     width:27px;
  39.     height:50px;
  40.     position: absolute;
  41.     top:50%;
  42.     margin-top:-25px;
  43.     background: url(../images/leftblue.png) no-repeat;
  44.     z-index:;
  45. }
  46.  
  47. .feedbacknext{
  48.     right:;
  49.     background-image: url(../images/rightblue.png);
  50. }
  51.  
  52. .feedbackname{
  53.     width: 100%;
  54.     margin-top: 26px;
  55.     display: flex;
  56.     flex-direction: column;
  57.     align-items: center;
  58.     justify-content: center;
  59. }
  60.  
  61. .feedbackname .p1{
  62.     font-size: 22px;
  63.     color: #333;
  64.     margin-bottom: 10px;
  65. }
  66.  
  67. .feedbackname .p2{
  68.     font-size: 18px;
  69.     color: #666;
  70. }

js代码：

写法思路：

1.定义一个数组，方便切换图片的样式，进行动画效果；

2.获取元素，定义名称，方便用取；

3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)；

4.在次为页面上的所有li赋值属性，利用缓动框架；

  1. window.onload = function () {
  2.     var arr = [
  3.         {   //
  4.             width:120,
  5.             top:11,
  6.             left:87,
  7.             opacity:20,
  8.             zIndex:2
  9.         },
  10.         {  //
  11.             width:120,
  12.             top:11,
  13.             left:237,
  14.             opacity:40,
  15.             zIndex:3
  16.         },
  17.         {   //
  18.             width:144,
  19.             top:0,
  20.             left:387,
  21.             opacity:100,
  22.             zIndex:4
  23.         },
  24.         {  //
  25.             width:120,
  26.             top:11,
  27.             left:561,
  28.             opacity:40,
  29.             zIndex:3
  30.         },
  31.         {   //
  32.             width:120,
  33.             top:11,
  34.             left:711,
  35.             opacity:20,
  36.             zIndex:2
  37.         }
  38.     ];
  39.  
  40.     //0.获取元素
  41.     var feedbackslide = document.getElementById("feedbackslide");
  42.     var feedbackliArr = feedbackslide.getElementsByTagName("li");
  43.     var feedbackarrow = feedbackslide.children[1];
  44.     var arrowChildren = feedbackarrow.children;
  45.     var arrowleft=5;
  46.     //设置一个开闭原则变量，点击以后修改这个值。
  47.     var flag = true;
  48.     move();
  49.     //3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转) 
  50.  
  51.     arrowChildren[0].onclick = function () {
  52.         if(flag){
  53.             flag = false;
  54.             move(false);
  55.         }
  56.  
  57.         arrowleft++;
  58.         console.log("left+++",arrowleft)
  59.  
  60.         if(arrowleft==1){
  61.             document.getElementById("feedstudent").innerText="小岳岳2";
  62.         }else if(arrowleft==2){
  63.             document.getElementById("feedstudent").innerText="张三峰1";
  64.         }else if(arrowleft==3){
  65.             document.getElementById("feedstudent").innerText="林动5";
  66.         }else if(arrowleft==4){
  67.             document.getElementById("feedstudent").innerText="令狐冲4";
  68.         }else if(arrowleft==5){
  69.             document.getElementById("feedstudent").innerText="欧阳常斌3";
  70.             arrowleft=0;
  71.         }else{
  72.             document.getElementById("feedstudent").innerText="小岳岳2";
  73.             arrowleft=1;
  74.         }
  75.  
  76.     }
  77.  
  78.     arrowChildren[1].onclick = function () {
  79.         if(flag){
  80.             flag = false;
  81.             move(true);
  82.         }
  83.  
  84.         arrowleft--;
  85.         console.log("right---",arrowleft)
  86.  
  87.         if(arrowleft==1){
  88.             document.getElementById("feedstudent").innerText="小岳岳2";
  89.         }else if(arrowleft==2){
  90.             document.getElementById("feedstudent").innerText="张三峰1";
  91.         }else if(arrowleft==3){
  92.             document.getElementById("feedstudent").innerText="林动5";
  93.         }else if(arrowleft==4){
  94.             document.getElementById("feedstudent").innerText="令狐冲4";
  95.         }else{
  96.             document.getElementById("feedstudent").innerText="欧阳常斌3";
  97.             arrowleft=5;
  98.         }
  99.  
  100.     }
  101.  
  102.     //4.书写函数。
  103.     function move(bool){
  104.         //判断：如果等于undefined,那么就不执行这两个if语句
  105.         if(bool === true || bool === false){
  106.             if(bool){
  107.                 arr.unshift(arr.pop());
  108.             }else{
  109.                 arr.push(arr.shift());
  110.             }
  111.         }
  112.         //在次为页面上的所有li赋值属性，利用缓动框架
  113.         for(var i=0;i<feedbackliArr.length;i++){
  114.             animate(feedbackliArr[i],arr[i], function () {
  115.                 flag = true;
  116.             });
  117.         }
  118.     }
  119.  
  120. }

动画效果js代码如下：

  1. function show(ele){
  2.     ele.style.display = "block";
  3. }
  4.  
  5. /**
  6.  * 获取元素样式兼容写法
  7.  * @param ele
  8.  * @param attr
  9.  * @returns {*}
  10.  */
  11. function getStyle(ele,attr){
  12.     if(window.getComputedStyle){
  13.         return window.getComputedStyle(ele,null)[attr];
  14.     }
  15.     return ele.currentStyle[attr];
  16. }
  17.  
  18. //参数变为3个
  19. //参数变为3个
  20. function animate(ele,json,fn){
  21.     //先清定时器
  22.     clearInterval(ele.timer);
  23.     ele.timer = setInterval(function () {
  24.         //开闭原则
  25.         var bool = true;
  26.  
  27.         //遍历属性和值，分别单独处理json
  28.         //attr == k(键)    target == json[k](值)
  29.         for(var k in json){
  30.             //四部
  31.             var leader;
  32.             //判断如果属性为opacity的时候特殊获取值
  33.             if(k === "opacity"){
  34.                 leader = getStyle(ele,k)*100 || 1;
  35.             }else{
  36.                 leader = parseInt(getStyle(ele,k)) || 0;
  37.             }
  38.  
  39.             //1.获取步长
  40.             var step = (json[k] - leader)/10;
  41.             //2.二次加工步长
  42.             step = step>0?Math.ceil(step):Math.floor(step);
  43.             leader = leader + step;
  44.             //3.赋值
  45.             //特殊情况特殊赋值
  46.             if(k === "opacity"){
  47.                 ele.style[k] = leader/100;
  48.                 //兼容IE678
  49.                 ele.style.filter = "alpha(opacity="+leader+")";
  50.                 //如果是层级，一次行赋值成功，不需要缓动赋值
  51.                 //为什么？需求！
  52.             }else if(k === "zIndex"){
  53.                 ele.style.zIndex = json[k];
  54.             }else{
  55.                 ele.style[k] = leader + "px";
  56.             }
  57.             //4.清除定时器
  58.             //判断: 目标值和当前值的差大于步长，就不能跳出循环
  59.             //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
  60.             if(json[k] !== leader){
  61.                 bool = false;
  62.             }
  63.         }
  64.         //只有所有的属性都到了指定位置，bool值才不会变成false；
  65.         if(bool){
  66.             clearInterval(ele.timer);
  67.             //所有程序执行完毕了，现在可以执行回调函数了
  68.             //只有传递了回调函数，才能执行
  69.             if(fn){
  70.                 fn();
  71.             }
  72.         }
  73.     },5);
  74. }
  75.  
  76. //获取屏幕可视区域的宽高
  77. function client(){
  78.     if(window.innerHeight !== undefined){
  79.         return {
  80.             "width": window.innerWidth,
  81.             "height": window.innerHeight
  82.         }
  83.     }else if(document.compatMode === "CSS1Compat"){
  84.         return {
  85.             "width": document.documentElement.clientWidth,
  86.             "height": document.documentElement.clientHeight
  87.         }
  88.     }else{
  89.         return {
  90.             "width": document.body.clientWidth,
  91.             "height": document.body.clientHeight
  92.         }
  93.     }
  94. }

如果复制代码不方便，博主百度网盘分享链接：链接: https://pan.baidu.com/s/1CEez4PN5fh61PC-vud96_w 提取码: t6rh

附加：无间隙自动轮播图：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>图片轮播</title>
  6. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  7. <style>
  8. #box {
  9.     width:100%;
  10.     height:80%;
  11.     overflow:hidden;
  12.     margin-top: 200px;
  13. }
  14. #box ul {
  15.     white-space:nowrap;
  16.     box-sizing:border-box;
  17.     padding:0;
  18.     margin:0;
  19. }
  20. #box ul>li {
  21.     display:inline-block;
  22.     width:auto;
  23.     height:100%;
  24.     padding:0 1px;
  25.     box-sizing:border-box;
  26. }
  27. #box ul>li>img {
  28.     height:100%;
  29.     width:235px;
  30.     margin:0;
  31.     padding:0;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="box">
  37.     <ul>
  38.         <li><img src="http://www.jq22.com/img/cs/500x500-1.png"></li>
  39.         <li><img src="http://www.jq22.com/img/cs/500x500-2.png"></li>
  40.         <li><img src="http://www.jq22.com/img/cs/500x500-3.png"></li>
  41.         <li><img src="http://www.jq22.com/img/cs/500x500-4.png"></li>
  42.         <li><img src="http://www.jq22.com/img/cs/500x500-5.png"></li>
  43.         <li><img src="http://www.jq22.com/img/cs/500x500-6.png"></li>
  44.         <li><img src="http://www.jq22.com/img/cs/500x500-7.png"></li>
  45.         <li><img src="http://www.jq22.com/img/cs/500x500-8.png"></li>
  46.     </ul>
  47. </div>
  48.  
  49. <script>
  50.  window.onload = function() {
  51.      var box = document.querySelector("#box");
  52.      var ul = document.querySelector("#box ul");
  53.      var sW = ul.scrollWidth;
  54.      ul.innerHTML += ul.innerHTML;
  55.      ul.style.width = ul.scrollWidth;
  56.  
  57.      var v = 0;
  58.      setInterval(() => {
  59.          v++;
  60.          if (v > sW) {
  61.              v = 1;
  62.          }
  63.          ul.style.transform = "translateX(" + -v + "px)";
  64.      }, 20);
  65.  }
  66.  
  67.  var isFirefox = /Firefox/i.test(navigator.userAgent) ? true : false;
  68.  var unMouseBtn = function(e) {
  69.      var e = e || window.event;
  70.      if (e.wheelDelta && e.ctrlKey) { //IE/Opera/Chrome e.wheelDelta±120
  71.          e.preventDefault ? e.preventDefault() : e.returnValue = false;
  72.      } else if (e.detail && e.ctrlKey) { //Firefox e.detail±3
  73.          e.preventDefault ? e.preventDefault() : e.returnValue = false;
  74.      }
  75.  };
  76.  var mousewheelevt = isFirefox ? "DOMMouseScroll" : "mousewheel";
  77.  if (document.attachEvent) { //IE/Opera/Chrome
  78.      document.attachEvent("on" + mousewheelevt, unMouseBtn);
  79.  } else if (document.addEventListener) { //Firefox
  80.      document.addEventListener(mousewheelevt, unMouseBtn, false);
  81.  }
  82.  var unCtrl = function(e) {
  83.      var e = e || window.event;
  84.      var isFirefox = (/Firefox/i.test(navigator.userAgent)) ? true : false; //Firefox
  85.      var code = isFirefox ? "109,107,173,61" : "109,107,189,187"; // +  -
  86.      if (e.ctrlKey && code.indexOf(e.keyCode) != -1) {
  87.          e.preventDefault ? e.preventDefault() : e.returnValue = false;
  88.      }
  89.  };
  90.  document.onkeydown = unCtrl;
  91. </script>
  92.  
  93. </body>
  94. </html>

总结：如果demo出现什么问题或者你书写过程中遇到什么麻烦，欢迎在博文下面留言，博主将一一解答，转载请注明出处，谢谢，请珍惜别人的劳动成果！！！

原生JS实现旋转轮播图+文字内容切换的更多相关文章

  1. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  2. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  3. 原生js手动轮播图

    手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...

  4. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  5. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  6. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  7. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  8. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  9. 前端基础功能，原生js实现轮播图实例教程

    轮播图是前端最基本.最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果.本教程讲解怎么实现一个简单的轮播图效果.学习本教程之前,读者需要具备html和css技能,同 ...

随机推荐

  1. 自己从0开始学习Unity的笔记 VII （C#中类继承练习）

    好久都没有写了.今天做了类继承的练习,做了一个小队,进行简单的判定. namespace 兵团建立练习 { class ServantBasics { public string name; //pr ...

  2. .Net Core Runtime安装说明

    在开发阶段,都是直接安装.Net Core的SDK,但是在部署的时候你还是直接装SDK吗?当然直接装SDK也没什么问题,也可以少一些麻烦.但是如果你像我一样不喜欢在产线上装SDK,只想装Runtime ...

  3. [uwp]数据绑定再学习

    在开始上代码前,先来假设这样一种情形: 出于某些原因,创建一个自定义控件(UserControl),然后为它定义一个依赖属性,这个属性有两个作用,一是调用控件方通过数据绑定技术为它赋值,二是控件内部的 ...

  4. epoll好文章

    https://www.cnblogs.com/apprentice89/p/3234677.html https://www.jianshu.com/p/aa486512e989 https://c ...

  5. RabbitMq初探——消息持久化

    消息持久化 前言 通过上一节,我们知道,有消息确认机制,保证了当消费者进程挂掉后,消息的不丢失. 但是如果rabbitmq挂掉呢?它的队列和消息都会丢失的.为了保证消息在rabbitmq挂掉重启后不丢 ...

  6. Java_IO流输入输出

    第三章 输入输出 一.I/O Input/Output 二.File 用途:对文件和目录进行常规操作(除文件读写操作外). 方法:exists():判断文件或目录是否存在 isFile():判断是否是 ...

  7. python 快速幂求斐波那契数列

    先占坑 后面再写详细的 import numpy as np def pow(n): a = np.array([[1,0],[0,1]]) b = np.array([[1,1],[1,0]]) n ...

  8. Linux下的压缩及归档

    Linux下常用的压缩格式有: gz,bz2,xz,zip,Z //只能压缩文件不能压缩目录,如果传递一个目录,他会把目录中的文件逐个压缩 ..压缩算法:算法不同,压缩比也不同 gz:gzip,压缩后 ...

  9. Cannot sending data from mongodb into elasticsearch using logstash

    Question: Hi all, i have an issue when i try to get data from mongodb to elasticsearch using logstas ...

  10. linux centos 7 下安装ElasticSearch5.4

    一. 把elasticsearch-5.4.0.rpm和kibana-5.4.0-x86_64.rpm上传到centos下/root目录中,如下图:二.进入centos目录/root,并用命令rpm ...