响应式轮播插件（无焦点&可链式操作）

**暂时还没加焦点 以后再慢慢加上更多的可定制效果
第一次写全屏轮播 遇到一些固定轮播没遇到过的事情
每一次成功写出自己想要的效果都会很满足，虽然网上很多完善的插件，但别人的毕竟是别人的 再好用也不是自己的成果 我以后会慢慢的把这个插件完善起来**

效果图预览

html
 

<!--声明 本页面语言为中文-->
<!--使用编码为 utf-8 -->
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
<title></title>
<!--全局初始化样式-->
<link href="css/css.css" rel="stylesheet" />
<!--轮播图样式-->
<link href="css/style.css" rel="stylesheet" />
<!--轮播容器-->
<p class="lunbo"><!--轮播图片容器-->
<ul class="carouselDom">
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
<!--左箭头--><!--右箭头--></p>
<!--<img src="img/5.jpg" alt="轮播图5" />--><!--JQ库文件--><script type="text/javascript" src="js/jquery-3.1.1.js"></script><!--轮播图JS文件--><script type="text/javascript" src="js/style.js"></script><!--页面调用部分--><script type="text/javascript">
    $(function(){
        $(".lunbo").Carousel({
            arrows:true,//箭头是否显示
            focus:true,//焦点是否显示
            speed:2500,//轮播切换速度
            left_Arrows:".left_arrow",//左箭头
            right_Arrows:".right_arrow",//右箭头
            carouselDomBox:".carouselDom",//轮播容器
            carouselDom:".carouselDom li",//轮播元素            
        });
    });
    </script>
<p>less</p>

body{
    overflow: hidden;
}
.lunbo{
    position: relative;
    overflow: hidden;
    .carouselDom{
        overflow: hidden;
        height: 0;
        padding-bottom: 26%;
        transition: padding-bottom 1s;
        -moz-transition: padding-bottom 1s;  /* Firefox 4 */
        -webkit-transition: padding-bottom 1s;   /* Safari 和 Chrome */
        -o-transition: padding-bottom 1s;    /* Opera */       
        li{
            float: left;
            line-height: 0px;
            position: relative;
            top: 0;  
            a{      
                display: block;
                background-size: cover!important;
                background-position: 50% 50%!important;  
                height: 100%;
                width: 100%;                 
            }
        }
    }
    .arrow{
        position: absolute;
        display: block;
        width: 50px;
        height: 98px;
        top: 50%;
        filter: Alpha(opacity=30); /* IE */   
        -moz-opacity:0.3;    /* FF 主要是为了兼容老版本的FF */
        opacity:0.3;    /* FF */
        background-repeat: no-repeat!important;
        background-position: 50% 50%!important;
        transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        -o-transform: translate(0%, -50%);
        -moz-transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%);
        -moz-transition: opacity 1s;  /* Firefox 4 */
        -webkit-transition: opacity 1s;   /* Safari 和 Chrome */
        -o-transition: opacity 1s;    /* Opera */    
    }
    .left_arrow{
        left: 10px;    
        &:hover{
            filter: Alpha(opacity=100); /* IE */   
            -moz-opacity:1;    /* FF 主要是为了兼容老版本的FF */
            opacity:1;    /* FF */            
        } 
    }
    .right_arrow{
        right: 15px;
        &:hover{
            filter: Alpha(opacity=100); /* IE */   
            -moz-opacity:1;    /* FF 主要是为了兼容老版本的FF */
            opacity:1;    /* FF */            
        }         
    }
}

@media only screen and (max-width: 992px) {
    .lunbo{
        .carouselDom{
            padding-bottom: 36%;
        }
    }    
}

@media only screen and (max-width: 768px) {
    .lunbo{
        .carouselDom{
            padding-bottom: 40%;
        }
    }    
}

@media only screen and (max-width: 480px) {
    .lunbo{
        .carouselDom{
            padding-bottom: 46%;
        }
    }    
}

js

;(function($){
    $.fn.Carousel = function(options){//定义插件的名称，这里为Carousel
        var defaults  = {
            arrows:true,//箭头是否显示
            focus:true,//焦点是否显示
            speed:2500,//轮播切换速度
            left_Arrows:".left_arrow",//左箭头
            right_Arrows:".right_arrow",//右箭头
            carouselDomBox:".carouselDom",//轮播容器
            carouselDom:".carouselDom li",//轮播元素
        };      

        var ops = $.extend(defaults,options);//将默认值和传入的参数进行合并
        return this.each(function(){        
            function realTime_w(){
                var win_w = $(window).width(); //实时获取窗口宽度
                var dom_box_h = $(ops.carouselDomBox).css("padding-bottom");  
                var dom_len = $(ops.carouselDom).length;//获取轮播数量
                var dom_box = $(ops.carouselDomBox).width(win_w*dom_len);//设置轮播容器宽度
                var dom_w = $(ops.carouselDom).width(win_w);//设置轮播元素宽度
                var dom_h = $(ops.carouselDom).height(dom_box_h);//设置轮播元素高度
                return win_w
            }           

            var carouseData = setInterval(realTime_w,100);//实时更新数据
            var w = realTime_w();
            var i = 0;
            var c_dom = $(ops.carouselDom);

            $(window).resize(function(){
                window.location.reload();           
            });         

            /*鼠标移入轮播暂停*/
            c_dom.bind("mouseover",function(){
                clearInterval(time);
            });

            /*鼠标移出轮播开始*/
            c_dom.bind("mouseout",function(){
                time = setInterval(automatic,ops.speed);//每隔1.5秒触发计时事件
            });

            /*左箭头*/
            $(ops.left_Arrows).bind("click",function(){
                arrows_a(-1);
            });

            /*右箭头*/
            $(ops.right_Arrows).bind("click",function(){
                arrows_a(1);
            });

            /*轮播自动运行函数*/
            function automatic(){
                arrows_a(1);
            }   

            /*轮播主体代码*/
            function arrows_a(s){
                i += s;
                clearInterval(time);
                /*当轮播图到第一张时 再点击 返回到最后一张*/
                if(i<0){
                    i=c_dom.length -1;
                }
                /*当轮播到最后一张时 再点击 返回到第一张*/
                if(i>=c_dom.length){
                    i=0;
                }
                c_dom.stop().animate({right:w*i});                  
                time = setInterval(automatic,ops.speed);
            }           
            time = setInterval(automatic,ops.speed);//每隔1.5秒触发计时事件
        });         
    }
})(jQuery);