响应式轮播插件(无焦点&可链式操作)

来源:转载

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

效果图预览

html

<!DOCTYPE html><!--声明 本页面语言为中文--><html lang="en"><head> <!--使用编码为 utf-8 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>固定尺寸 轮播图</title> <!--全局初始化样式--> <link rel="stylesheet" href="css/css.css"> <!--轮播图样式--> <link rel="stylesheet" href="css/style.css"></head><body><!--轮播容器--><div class="lunbo"> <!--轮播图片容器--> <ul class="carouselDom"> <li> <a href="javascript:void(0);" style="background: url(img/2.jpg);"></a> </li> <li> <a href="javascript:void(0);" style="background: url(img/3.jpg);"></a> </li> <li> <a href="javascript:void(0);" style="background: url(img/4.jpg);"></a> </li> <li> <a href="javascript:void(0);" style="background: url(img/5.jpg);"></a> </li> </ul> <!--左箭头--> <a class="arrow left_arrow" href="javascript:void(0);" style="background: url(img/index-banner-left.png) no-repeat;"></a> <!--右箭头--> <a class="arrow right_arrow" href="javascript:void(0);" style="background: url(img/index-banner-right.png) no-repeat;"></a></div><!--<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></body></html>

less

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);

分享给朋友:
您可能感兴趣的文章:
随机阅读: