手把手教你用 jQuery 制作无缝轮播

Web 开发已经离不开轮播图，目前轮播的样式五花八门，如：淡入淡出型、上下滑动型、左右滑动型、左右滑动无缝型，对比用户体验的话，无缝轮播方式是最好的，因为在播放多张图片的情况下不会出现间断感，该课程用最简单易懂的方式，让你学会独立制作与开发。

本场 Chat 将会带领大家，深入浅出。从轮播图开始，利用浅显易懂的方式，学习 HTML+CSS 以及 jQuery 的知识：

1. 了解轮播图的基本原理，概念；
2. HTML 标签的用法；
3. CSS 作为样式表是怎么渲染页面；
4. jQ 是怎么实现图随手动的；
5. 详解 jQ 计时器的作用。

前言

网站上经常见到焦点图动画，焦点图的动画有多种，如：淡入淡出型、上下滑动型、左右滑动型、左右滑动无缝型，对比用户体验的话，无缝轮播方式是最好的，因为在播放多张图片的情况下不会出现间断感，该课程用最简单易懂的方式，让你学会独立制作与开发。

第一章、无缝轮播概念以及准备工作 1.无缝轮播介绍

普通的轮播图，最后一张 img切换到第一张时会产生晃眼的效果，这种体验是非常不好的。

而无缝轮播是将左右方向的切换或上下方向的切换进行无间断的连续播放，在最后一张切换到第一张 img 时，会采用平滑的方式渡过。这种观赏方式不会出现短点，观赏性强。

在淘宝官网、好 123、csdn 等网站焦点图都采用这种方式。

2、概念

轮播是采用将 img 横排排列，用 overflow:hidden；进行溢出控制，并且利用 jQ 进行滑动以及时间控制，而无缝轮播是在普通普通轮播的基础上增加一个 img，从而达到无缝滑动的效果。

在下图中，你可以看到第一张和最后一张是重复的，这就是无缝的实现原理

第二章、框架搭建 实际效果图

• 为了达到 li 标签随照片变化的目的，num 采用的无须列表，但是需要用 jQ 进行控制，并且实现。

第三章 css 样式引用

.banner {    margin: 150px auto;    width: 650px;    height: 433px;    position: relative;    cursor: pointer;    overflow: hidden;}    .img {        width: 5000px;        position: absolute;        left: 0;        top: 0;        display: block;    }    .img li {        float: left;    }    .num {        position: absolute;        width: 100%;        bottom: 10px;        left: 0;        text-align: center;        font-size: 0px;    }    .num li {        width: 10px;        height: 10px;        background: aquamarine;        border-radius: 20px;        display: inline-block;        margin: 0 3px;    }    .num li.on {        background: #000000;    }        .btn {        width: 30px;        height: 50px;        background: rgba(0,0,0,0.5);        position: absolute;        top: 50%;        margin-top: -25px;        text-align: center;        line-height: 50px;        color: white;        font-size: 40px;        font-family: "宋体";        display: none;    }    .banner:hover .btn {        display: block;    }    .btn_l {        left: 0;    }    .btn_r {        right: 0;    }    jQ代码为原生未优化的，在下面还会进行优化，从而使用起来更方便，减少冗余                    $(function() {                    var i = 0;                    var clone = $(".img li").first().clone();                    $(".img").append(clone);                    var size = $(".img li").size();                    /*.num li 的js*/                    for(var j=0;j