接触前端也很久了，今天才发现，要做好一个轮播，其实有很多东西需要考虑进去，否则做出来的轮播效果并不好，下面我就来做一个轮播，是依赖jquery来写的

1.要做轮播，首先需要的是HTML的内容，css的机构样式，以下为html代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="utf-8" />
  6.      <link rel="stylesheet" href="./ft-carousel.css" />
  7.      <script src="./jquery-3.3.1.min.js"></script>
  8.      <script src="./ft-carousel.min.js"></script>
  9.      <style>
  10.      </style>
  11.  </head>
  12.  
  13.  <body>
  14.  
  15.      <div class="example">
  16.          <div class="ft-carousel" id="carousel_1">
  17.              <ul class="carousel-inner">
  18.                  <li class="carousel-item">
  19.                      <img src="img/a1.jpg" />
  20.                  </li>
  21.                  <li class="carousel-item">
  22.                      <img src="img/a2.jpg" />
  23.                  </li>
  24.                  <li class="carousel-item">
  25.                      <img src="img/a3.jpg" />
  26.                  </li>
  27.                  <li class="carousel-item">
  28.                      <img src="img/a4.jpg" />
  29.                  </li>
  30.  
  31.              </ul>
  32.          </div>
  33.      </div>
  34.      <script type="text/javascript">
  35.          $("#carousel_1").FtCarousel();
  36.      </script>
  37.  
  38.  </body>
  39.  
  40.  </html>

2.css 代码如下：

  1.  ul,
  2.  ol,
  3.  li,
  4.  div {
  5.      margin: 0;
  6.      padding: 0;
  7.  }
  8.  
  9.  * {
  10.      margin: 0;
  11.      padding: 0;
  12.  }
  13.  
  14.  ul,
  15.  ol {
  16.      list-style: none;
  17.  }
  18.  
  19.  .ft-carousel {
  20.      position: relative;
  21.      width: 100%;
  22.      height: 700px;
  23.      overflow: hidden;
  24.  }
  25.  
  26.  .ft-carousel .carousel-inner {
  27.      position: absolute;
  28.      left: 0;
  29.      top: 0;
  30.      height: 100%;
  31.  }
  32.  
  33.  .ft-carousel .carousel-inner .carousel-item {
  34.      float: left;
  35.      height: 100%;
  36.  }
  37.  
  38.  .ft-carousel .carousel-item img {
  39.      width: 100%;
  40.  }
  41.  
  42.  .ft-carousel .carousel-indicators {
  43.      position: absolute;
  44.      left: 0;
  45.      bottom: 10px;
  46.      width: 100%;
  47.      text-align: center;
  48.      font-size: 0;
  49.  }
  50.  
  51.  .ft-carousel .carousel-indicators span {
  52.      display: inline-block;
  53.      width: 12px;
  54.      height: 12px;
  55.      background-color: #fff;
  56.      margin: 0 4px;
  57.      border-radius: 50%;
  58.      cursor: pointer;
  59.  }
  60.  
  61.  .ft-carousel .carousel-indicators span.active {
  62.      background-color: #de3a3a;
  63.  }
  64.  
  65.  .ft-carousel .carousel-btn {
  66.      position: absolute;
  67.      top: 50%;
  68.      width: 50px;
  69.      height: 45px;
  70.      margin-top: -25px;
  71.      cursor: pointer;
  72.  }
  73.  
  74.  .ft-carousel .carousel-prev-btn {
  75.      left: 0;
  76.      background: url(./img/prev.png) no-repeat;
  77.  }
  78.  
  79.  .ft-carousel .carousel-next-btn {
  80.      right: 0;
  81.      background: url(./img/next.png) no-repeat;
  82.  }
  83.  
  84.  body {
  85.      margin: 0;
  86.      font-family: "微软雅黑";
  87.      background-color: #1F1F1F;
  88.  }
  89.  
  90.  .example {
  91.      width: 100%;
  92.      font-size: 40px;
  93.      text-align: center;
  94.      margin: 20px auto;
  95.      background-color: #464576;
  96.  }
  97.  
  98.  .carousel-item {
  99.      line-height: 336px;
  100.      color: #fff;
  101.      font-family: Arial Black
  102.  }

3.轮播的关键在于js;

因为是依赖jquery的，所以先把jquery 传进去,使用一个立即执行函数(注意，加+，减-，波浪线~，感叹号！开始，或者使用小括号括起来，都是立即执行函数的写法):主要有三个步骤，一是创建构造函数i(t,i),  二是改写构造函数的原型对象，三是在jquery上扩展调用函数的方法,如下：

  1.  ~ function (t) {
  2.      // 创建构造函数
  3.      function i(t, i) {
  4.          this.init(t, i);
  5.      };
  6.      // 改写构造函数的原型对象
  7.      i.prototype = {
  8.  
  9.      };
  10.      // 在jquery 上扩展FtCarousel函数
  11.      t.fn.FtCarousel = function (n) {
  12.          return this.each(function () {
  13.              new i(t(this), n);
  14.          });
  15.      };
  16.  }(jQuery);

4.我们要做的是一个无缝轮播，但是在HTML中，我们只有4 张图片，二制作无缝轮播需要使用  （要轮播的图片数量 +  2 )张图片，所以在做轮播之前，我们需要先加上另外的两张图片，复制第一张图片放到最后一张图片的位置，复制最后一张图片放到第一张图片的位置，这是一个；然后，在轮播中需要控制轮播上一页下一页的按钮，这在html 中也没有写，所以这也需要加上；在控制轮播的时候，我需要直接跳到某一张图片，这也需要一个轮播序号的按钮，在HTML 中也没有，所以，这个也需要加上；这些是硬件方面的要求

5.完成上一点，已经有6 张图片在网页上了，那么就开始做轮播吧；要做轮播，首先要设置起始照片，设置第二张图片开始，因为现在的第二张图是原来的第一张图片；然后设置定位问题，设置装图片的box 为绝对定位，这样才好进行移动，然后设置 box 上一层的div为相对定位；为了使box内的图片之间不留空隙，需要设置图片img 为浮动，即左浮动；

6.因为要达到移动的效果，box上一层的div 设置一个宽度，超出宽度部分禁止显示；然后设置图片box的宽度为显示div宽度的 6 倍，然后设置img图片的宽度与显示div的宽度相同，这样，box 左右移动，就形成了img图片左右移动的效果，当轮播从前到后移动到最后一个时，立即设置left 的值为 附 一个显示宽度的值，当轮播从后到前，移动到第一个时，立即设置left 值为轮播长度负的轮播长度减二个显示宽度，这样，轮播就会立即显示到第一张图片或者最后一张图片，给人的感觉就像是一直循环轮播移动一样，这就是无缝轮播的原理

7. 下面来完成第3个步骤中没有完成的部分：不构造函数的原型对象继续写完；原型对象上的函数，new 出来的对象是可以直接调用的；

  1.  ~ function (t) {
  2.      // 创建构造函数
  3.      function i(t, i) {
  4.          this.init(t, i);
  5.      };
  6.      // 改写构造函数的原型对象
  7.      i.prototype = {
  8.              //  函数初始化
  9.              // 在这里括号中的i 为传入的需要进行轮播移动的对象
  10.              init: function (i, n) {
  11.                  // 把ele属性设置到调用函数上，设置ele的值为需要进行轮播的对象
  12.                  this.ele = i,
  13.                      // 添加一个opts 对象扩展到jquery 对象上，在这里t 为外部传入的jquery 对象，对象上有index /auto/time/indecators/button 等参数
  14.                      this.opts = t.extend({}, {
  15.                          index: 0,
  16.                          auto: !0,
  17.                          time: 3e3,
  18.                          indicators: !0,
  19.                          buttons: !0,
  20.                          oresize: true
  21.                      }, n),
  22.                      // 在构造函数上添加index 属性，this.index 的属性值为 this.opts 对象上的index属性值，把opts 对象上的属性值赋值给this对象上的index 值
  23.                      this.index = this.opts.index,
  24.                      // 在执行初始化函数时，执行以下几个方法：render,eventBind,loop,resize
  25.                      this.render(),
  26.                      this.eventBind(),
  27.                      this.opts.auto && this.loop(),
  28.                      this.opts.oresize && this.resize()
  29.              },
  30.              render: function () {
  31.                  this.renCas();
  32.                  this.opts.indicators && this.renIns();
  33.                  this.opts.buttons && this.renBtns();
  34.              },
  35.              renCas: function () {
  36.                  var t = this.ele.find(".carousel-inner"),
  37.                      i = t.find(".carousel-item"),
  38.                      n = i.length,
  39.                      e = i.eq(n - 1).clone(),
  40.                      s = i.eq(0).clone(),
  41.                      o = this.ele.width(), ///获取轮播框的宽度
  42.                      startW = 1863,
  43.                      startH = 700;
  44.                  this.ele.height(parseInt(o * startH / startW)),
  45.                      // this.index 表示获取当前显示的轮播图图片的索引值，
  46.                      this.index = this.index < 1 || this.index > (n + 2 - 2) ? 1 : this.index,
  47.                      t.width((n + 2) * o).prepend(e).append(s).css("left", (this.index) * -o),
  48.                      t.find(".carousel-item").width(o);
  49.              },
  50.              renIns: function () {
  51.                  for (var t = this.ele.find(".carousel-item").length - 2, i = '<div class="carousel-indicators">', n = 0; n < t; n++) i += '<span data-index="' + n + '"></span>';
  52.                  i += "</div>",
  53.                      this.ele.append(i).find(".carousel-indicators span").eq(this.index - 1).addClass("active")
  54.              },
  55.              renBtns: function () {
  56.                  this.ele.append('<span class="carousel-btn carousel-prev-btn"></span><span class="carousel-btn carousel-next-btn"></span>')
  57.              },
  58.              // 在这里，要把 t 改为 index
  59.              // 这里传入参数，传入1 未左右，传入-1 为右移，
  60.              // 移动时，如此设置  tarLeft = -(this.index+t)*e;
  61.              animate: function (t) {
  62.                  if (this.ele.find(".carousel-inner").is(":animated")) return;
  63.                  var i = this,
  64.                      n = this.ele.find(".carousel-inner"),
  65.                      e = this.ele.width(),
  66.                      s = n.find(".carousel-item").length;
  67.                  var tarLeft = -(this.index + t) * e + 'px';
  68.                  n.stop(true, !0).animate({
  69.                      left: tarLeft,
  70.                  }, 1000, function () {
  71.                      i.index = i.index + t,
  72.                          i.index > (s - 2) && (i.index = 1) && n.css("left", -e * i.index + 'px'),
  73.                          i.index < 1 && (i.index = s - 2) && n.css("left", -e * i.index + 'px'),
  74.                          i.opts.buttons && i.showBtn();
  75.                  });
  76.              },
  77.              showBtn: function () {
  78.                  this.ele.find(".carousel-indicators span").removeClass("active").eq(this.index - 1).addClass("active")
  79.              },
  80.              loop: function () {
  81.                  clearInterval(i.timer);
  82.                  var t = this.ele.find(".carousel-next-btn");
  83.                  this.timer = setInterval(function () {
  84.                      t.trigger("click")
  85.                  }, this.opts.time)
  86.              },
  87.              eventBind: function () {
  88.                  var i = this,
  89.                      n = this.ele.find(".carousel-prev-btn"),
  90.                      e = this.ele.find(".carousel-next-btn"),
  91.                      s = this.ele.find(".carousel-indicators"),
  92.                      o = this.ele.width(),
  93.                      a = this.opts.auto;
  94.                  var that = this;
  95.  
  96.                  e.on("click", function () {
  97.                      i.animate(1)
  98.                  }), n.on("click", function () {
  99.                      i.animate(-1)
  100.                  }), s.on("click", "span", function () {
  101.                      var curindex = i.ele.find(".carousel-indicators span.active").attr("data-index");
  102.                      var tarindex = $(this).attr("data-index");
  103.                      var tarmove = tarindex - curindex;
  104.                      i.animate(tarmove);
  105.                  }), a && this.ele.hover(function () {
  106.                      clearInterval(i.timer)
  107.                  }, function () {
  108.                      i.loop()
  109.                  });
  110.              },
  111.              resize: function () {
  112.                  var i = this,
  113.                      startW = 1863,
  114.                      startH = 700;
  115.                  $(window).on('resize', function () {
  116.                      o = i.ele.width(),
  117.                          t = i.ele.find(".carousel-inner"),
  118.                          limg = t.find(".carousel-item"),
  119.                          s = t.find(".carousel-item").length;
  120.                      //设置宽
  121.                      t.width(o * s), limg.width(o);
  122.                      var Oheight = parseInt(o * startH / startW);
  123.                      i.ele.height(Oheight)
  124.                  });
  125.              },
  126.          },
  127.          // 在jquery 上扩展FtCarousel函数
  128.          t.fn.FtCarousel = function (n) {
  129.              return this.each(function () {
  130.                  new i(t(this), n);
  131.              });
  132.          };
  133.  
  134.  }(jQuery);

以上，轮播图完成了，支持窗口自适应；

不过有一点瑕疵，就是在窗口自适应的时候，个人感觉不太连续，目前还不知道问题出在哪里，有知道的大神请留言提示一下，谢谢；

记一个jquery 无缝轮播的制作方法的更多相关文章

  1. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  2. jquery 无缝轮播

    新闻公告无缝轮播--demo 理解:向上移动一个li的高度+margin-bottom值,同时将ul第一个的li插入到ul的最后一个位置. <!DOCTYPE html> <html ...

  3. jQuery无缝轮播图思路详解-唯品会

    效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...

  4. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  5. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

  6. jQuery图片无缝轮播

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  8. jquery做一个小的轮播插件---有BUG，后续修改

    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...

  9. js、jQuery实现文字上下无缝轮播、滚动效果

    因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...

随机推荐

  1. Linux搭建SVN环境

    1.安装SVN yun install -y subversion root权限安装 安装成功 验证 svnserve --version 创建SVN版本库 cd /home/kuma/下载 mkdi ...

  2. 产生10个随机数5-9之间 统计一个int类型的一维数组中有多少个在[min,max]之间的数

    * 产生10个随机数5-9之间 统计一个int类型的一维数组中有多少个在[min,max]之间的数 */ import java.util.*; public class Demo{ public s ...

  3. windows下python虚拟环境virtualenv安装和使用

    前面介绍了python在ubuntu16.04环境下,python的虚拟环境virtualenv的安装,下面介绍在windows环境下的安装和使用. 环境信息 操作系统:windows10 pytho ...

  4. sdn的相关学习系列之一mininet的安装

    Ubuntu16.04安装mininet 1.安装git命令 sudo apt-get install git 2.从Github上下载Mininet官网的源码 git clone git://git ...

  5. 《DSP using MATLAB》Problem 7.10

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  6. Kali安装虚拟机遇到的问题

    1.上官网下载了最新版的VMware 14.0版,安装的时候下一步下一步就是了. 2.最新版的官网激活码 FF590-2DX83-M81LZ-XDM7E-MKUT4 CG54H-D8D0H-H8DHY ...

  7. C#编码、解码与ASP.NET编码解码对应函数

    JavaScript函数分别为:encodeURIComponent/decodeURIComponent C#对应的函数分别为:Uri.EscapeUriString/Uri.EscapeDataS ...

  8. PythonStudy——赋值运算符 Assignment operator

    eg: num = 10 num += 1 # 等价于 num = num + 1 => 11 print(num) 特殊操作: 1.链式赋值 a = b = num print(a, b, n ...

  9. Day 14 三元运算符，列表推导式，内置函数

    三目运算符 ```python# 三目(元)运算符:就是 if...else...语法糖# 前提:简化if...else...结构,且两个分支有且只有一条语句# 注:三元运算符的结果不一定要与条件直接 ...

  10. MySQL通过分组计算百分比

    公司在做柯米克的分析报告,需要我这边把汽车之家柯米克论坛的评论数据和评论用户所在地的数据获取,通过爬虫的方式很快的解决了数据的问题,但是需要我提取下各省评论人数的比例,所以在数据库里面直接计算了相关的 ...