无缝轮播图案例

 先把要写的轮播图框架简单的写一下。要实现自动轮播，点击切换图片和点击跳转指定的图片。

<div id="box">
    <div class="inner">
        <ul class="swiper">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ol class="pagination">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>

        <div class="control">
            <span class="left"><</span>
            <span class="right">></span>
        </div>

    </div>


</div>

 简单的写一下css的样式，方便我们使用，修饰轮播图的基本结构

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 500px;
            height: 200px;
            padding: 5px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        .inner {
            width: 500px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        ul {
            list-style: none;
            width: 3000px;
            height: 200px;
            position: absolute;

        }

        ul > li {
            width: 500px;
            height: 200px;
            float: left;
        }

        ol {
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        ol > li {
            float: left;
            width: 25px;
            height: 25px;
            background-color: #fff;
            border-radius: 25px;
            margin-right: 20px;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
        }

        ol > li.current {
            background-color: orange;
            color: #fff;
        }

        .control > span {
            position: absolute;
            top: 50%;
            margin-top: -20px;
            display: inline-block;
            width: 25px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.31);
            color: white;
            font-size: 20px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;


        }

        .right {
            right: 0px;
        }

        .control {
            display: none;
        }

        #box:hover .control {
            display: block;
        }


        /*    背景颜色版*/
        ul > li {
            font-size: 60px;
            color: #fff;
            text-align: center;
            line-height: 200px;
        }

        ul > li:nth-child(1) {
            background-color: red;
        }

        ul > li:nth-child(2) {
            background-color: orange;
        }

        ul > li:nth-child(3) {
            background-color: purple;
        }

        ul > li:nth-child(4) {
            background-color: hotpink;
        }

        ul > li:nth-child(5) {
            background-color: blue;
        }

        ul > li:nth-child(6) {
            background-color: red;
        }

    </style>

这里我们使用的是jQuery的方法写的，首先别忘记引入我们的jQuery文件。

然后编写我们要实现的步骤，每一步代码都有详细的注释，无缝轮播的重点就是给客户视觉上看不出图片切换了，原理就是在最后面克隆第一张图片，然后迅速回到第一张，然后在接着循环第二张图片。这样视觉上看不到直接切换到第一张的。

  $.fn.lunbo=function(focusClass){
        // 通过this找到几个重要的元素
        var $swiper=this.find('.swiper')
        var $pagination=this.find('.pagination')
        var $control=this.find('.control')
        // 每次轮播滑动的宽度
        var moveWidth=$swiper.children()[0].offsetWidth;
        // 克隆第一个元素拼接到最后
        $swiper.append($swiper.children().eq(0).clone(true));
        // 添加一种图之后给父元素的宽度变宽
        $swiper.width(($swiper.children().length+1)*moveWidth)
        // 用来轮播的索引值
        var index=0;
        // 焦点图轮播的索引
        var focusIndex=0;
        // 定义开闭原则 决定是否启用焦点图代码功能
        var isFocus=$pagination.length!==0
        // 定义开闭原则 决定是否启用轮播图代码功能
        var isControl=$control.length!==0


        // 页面加载的时候启动定时器自动轮播
        var timer=setInterval(autoPlay,2000)
        // 鼠标移入移出开始以及停止定时器
        this.hover(function(){
            clearInterval(timer)
        },function(){
            timer=setInterval(autoPlay,2000)
        })
        // 焦点图点击 焦点功能实现
        if(isFocus){
            
                $pagination.children().click(function(){
                
                // 让索引值保持一致
                index=focusIndex=$(this).index()
                
            
                $swiper.stop().animate({
                    left:-index*moveWidth
                },500)
                $(this).addClass(focusClass).siblings().removeClass(focusClass)

            })
        }
        if(isControl){
            $control.on('click','.left',function(){
                index--;
                if(index<0){
                    $swiper.css('left',-($swiper.children().length-1)*moveWidth)
                    index=$swiper.children().length-2
                }
                $swiper.stop().animate({
                    left:-index*moveWidth
                },500)
                // 下面的轮播焦点图
                focusIndex--;
                if(focusIndex<0){
                    focusIndex=$pagination.children().length-1
                }
                $pagination.children().eq(focusIndex).addClass(focusClass).siblings().removeClass(focusClass)


            }).on('click','.right',function(){
                autoPlay()
            })
        }
        function autoPlay(){
            index++;
            // 如果超过假一号的索引  我们就闪现到真一号
            if(index>$swiper.children().length-1){
                $swiper.css('left',0)
                // 真2号图片的索引
                index=1
            }
            $swiper.stop().animate({
                left:-index*moveWidth
            },500)
            // 下面的小圆点的轮播
            focusIndex++;
            if(focusIndex>$pagination.children().length-1){
                focusIndex=0
            }
            $pagination.children().eq(focusIndex).addClass(focusClass).siblings().removeClass(focusClass)
        }

    }
    $('#box').lunbo('current')