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

                 //首页无缝轮播
                 ;
                 (function($, window, document, undefined) {

                     $.fn.slider = function(options) {

                         var defaults = { //默认参数
                             delay: 3000, //间隔
                             speed: 600, //速度
                             auto: false, //自动否
                             shiying: false //适应否

                         };

                         var settings = $.extend({}, defaults, options); //合并参数    ｛｝防覆盖

                         var _this = this;
                         var li = _this.find('li');
                         var w = li.eq(0).width();
                         var len = li.length - 1;
                         var index = 0;
                         var autoPlay;

                         function init() {
                             if(settings.shiying) {

                                 shiying();

                             };

                             left();
                             right();
                             if(settings.auto) {

                                 auto();

                             };

                         }

                         init();

                         function shiying() {

                             var wid = $(document.body).outerWidth(true) + 17;
                             li.width(wid);
                             alert(wid);
                             $(window).resize(function() {
                                 wid = $(document.body).outerWidth(true) + 17;
                                 li.width(wid);

                             })

                             var data_src = [];
                             for(var i = 0; i < li.length; i++) {

                                 data_src.push(li.eq(i).find("img").attr("src"));

                                 li.eq(i).css({
                                     'background': 'url(' + data_src[i] + ') no-repeat center center'
                                 });

                             }

                             li.find('img').remove();

                         };

                         function left() {

                             _this.find('.arrow_left').on('click', function() {

                                 if(_this.find('ul').is(":animated")) {
                                     return;
                                 };

                                 play();

                             });

                         };

                         function right() {

                             _this.find('.arrow_right').on('click', function() {
                                 if(_this.find('ul').is(":animated")) {
                                     return;
                                 };

                                 if(index < 1) {

                                     _this.find('ul').append(li.eq(len).clone());

                                     _this.find('ul').css({
                                         'marginLeft': -w * (len + 1)
                                     }); //此处clone了一个新的 所以需要加一

                                     index = len;
                                     _this.find('.dots span').eq(index).addClass('active').siblings().removeClass('active');

                                     _this.find('ul').stop().animate({
                                         'marginLeft': -w * index
                                     }, function() {

                                         _this.find('li:last').remove();

                                     });

                                 } else {

                                     index--;

                                     _this.find('ul').stop().animate({
                                         'marginLeft': -w * index
                                     });

                                     _this.find('.dots span').eq(index).addClass('active').siblings().removeClass('active');

                                 }

                             });

                         };

                         function play() {

                             if(index > len - 1) {
                                 index++;

                                 _this.find('ul').prepend(li.eq(0).clone());

                                 _this.find('ul').stop().animate({
                                     'marginLeft': -w * index
                                 }, function() {
                                     _this.find('ul').css({
                                         'marginLeft': 0
                                     });
                                     _this.find('li:first').remove();
                                     index = 0;
                                     _this.find('.dots span').eq(index).addClass('active').siblings().removeClass('active');

                                 });

                             } else {
                                 index++;
                                 _this.find('.dots span').eq(index).addClass('active').siblings().removeClass('active');

                                 _this.find('ul').stop().animate({
                                     'marginLeft': -w * index
                                 });

                             }

                         };

                         function auto() {

                             autoPlay = setInterval(play, settings.delay);

                         };

                         function dots() {

                             var $dots = $('<div class="dots"></div>');

                             for(var i = 0; i < li.length; i++) {

                                 var dot_span = $('<span></span>');

                                 $dots.append(dot_span);
                             }

                             _this.append($dots);
                             $('.dots span:first').addClass('active');

                             _this.find('.dots span').on('click', function() {

                                 $(this).addClass('active').siblings().removeClass('active');
                                 var index_dot = $(this).index();

                                 //alert(index_dot);
                                 index = index_dot;

                                 _this.find('ul').stop().animate({
                                     'marginLeft': -w * index
                                 });

                             });

                         }

                         dots();

                         _this.hover(function() {

                                 clearInterval(autoPlay);

                             }, function() {

                                 autoPlay = setInterval(play, settings.delay);

                             }

                         )

                     };

                 })(jQuery, window, document);

借着上次的小项目，自己做了一个小的轮播插件，实现了，但是还有有许多的问题。

一时响应式时有问题，图片不能跟随,后续我会尝试用unslider里的imgReload方法进行改进，这里做一个标记.

imgReload

function imgReload()

{

    var imgHeight = 0;

    var wtmp = $("body").width();

    $("#banner ul li").each(function(){

        $(this).css({width:wtmp + "px"});

    });

    $(".sliderimg").each(function(){

        $(this).css({width:wtmp + "px"});

        imgHeight = $(this).height();

    });

}

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

然后是init方法，自己完全是瞎搞。

后续会尝试用面向对象的方法去改造。