简易无缝滚动功能齐全轮播组件

作者：秋了秋发表时间：2017年10月22日

因为平时不断需要用到轮播特效，又看不上插件，都是来一个就手写一个，写多了就写了个通用性较好的出来，以后都不用写了，直接调用。之前也有相关轮播的文章，而且印象中有几篇了。但这篇是更灵活，更通用，使用更傻瓜。使用细节注意看后面的段落。

无论是大图banner的轮播：

还是卡片式轮播，只要是个轮播都可以实现：卡片轮播特效图

/*
* 轮播图组件
* by:秋叶博客
* 轮播内容直接父级容器ul的class为parts
* 前进按钮class为next,后退按钮class为prev
* 小点容器ul的class为dot。
* */
function initSlider($contaner){
    var $ul = $("ul.parts",$contaner);
    var $liw,
        $dot = $('.dot',$contaner),$dotLi = $('>li',$dot),
        lenth,
        $Li = $('>li',$ul);
    var speed = 5000;
    initElement();
    initCss();

    function initCss(){
        //主要用于纠正一些致命的样式
        $contaner.css({
            "position":"relative",
            "overflow":"hidden"
        });
        $ul.css({
            "position":"absolute",
            "height":"100%",
            "top":0,
            "left":0
        });
        $Li.css({
            "height": "100%",
            "float": "left"
        });
    }

    //响应式设计（设置样式）
    function initElement(){
        $ul.append($ul.html());
        lenth = $('>li',$ul).length;
        for(var i = 0; i < lenth / 2; i++){
            $('<li></li>').appendTo($dot);
        }
        $dotLi = $('>li',$dot);
    }

    function resize() {
        var $li = $('>li',$ul);
        $liw = $ul.parent().width();
        $ul.width($liw * lenth);
        $li.width($liw);
    }

    //初始化
    var i = 0;
    resize();

    $(window).resize(function(){
        resize();
        slide();
    });

    //轮播主函数
    function slide() {
        if (i >= lenth) {
            $ul.css('left',(-$liw*lenth/2+$liw)+'px');
            i = lenth/2;
        }
        else if(i<0){
            $ul.css('left',(-$liw*lenth/2)+'px');
            i=lenth/2-1;
        }
        $ul.stop().animate({'left': -$liw * i},speed/4);
        $dotLi.eq(i<lenth/2?i:i-lenth/2).addClass('on').siblings().removeClass('on');
        i++;
    }

    slide();

    var interval = setInterval(slide, speed);//设置定时器开始轮播

    //焦点点击事件
    $dotLi.click(function() {
        clearInterval(interval);
        i = $(this).index();
        slide();
        interval = setInterval(slide, speed);
    });

    //下一张按钮事件
    $('.next',$contaner).click(function() {
        clearInterval(interval);
        slide();
        interval = setInterval(slide, speed);
    });

    //上一张按钮事件
    $('.prev',$contaner).click(function() {
        clearInterval(interval);
        i -= 2;
        slide();
        interval = setInterval(slide, speed);
    });

    //鼠标移入移出事件
    $ul.mouseover(function() {
        clearInterval(interval);
    });

    $ul.mouseout(function() {
        interval = setInterval(slide, speed);
    })
}

使用上一定要遵循以下html结构：

<div id="banner">
    <div class="banner">
        <ul class="parts">
            <li><img src="img/banner1.jpg"></a></li>
            <li><img src="img/banner2.jpg"></a></li>
            <li><img src="img/banner3.jpg"></a></li>
            <li><img src="img/banner4.jpg"></a></li>
        </ul>
        <ul class="dot"></ul>
        <span class="prev"></span><span class="next"></span>
    </div>
</div>

注意标颜色的部分，class一定要对应得上，除非你修改我的方法，给它传参进去，但我认为没这个必要，按照这种结构即可。轮播容器ul.parts,小点的容器ul.dot,前进按钮.next,后退按钮.prev. 样式根据自己喜好写好。样式上需要注意轮播内容li不要margin。

此方法能满足大部分网页轮播特效，不需要前进后退按钮，就不需要加前进后退按钮html结构，不需要小点就不加小点的容器。

调用只需要传个最外部容器的jq选择器对象即可，如：