接触前端也很久了，今天才发现，要做好一个轮播，其实有很多东西需要考虑进去，否则做出来的轮播效果并不好，下面我就来做一个轮播，是依赖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 Black102 }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 无缝轮播的制作方法
原文地址：https://www.cnblogs.com/huanying2015/p/9248309.html