JavaScript实现图片轮播插件封装
Posted qiand
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现图片轮播插件封装相关的知识，希望对你有一定的参考价值。
本文为大家分享了js图片轮播插件的具体代码，供大家参考，具体内容如下
我封装的这个轮播插件只需要获取到图片和按钮就可以啦。
css 样式
.body width: 700px; margin: 100px auto; position: relative; height: 300px; overflow: hidden; .body img width: 700px; position: absolute; display: none; .body ul position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); .body li list-style: none; float: left; width: 15px; height: 15px; border-radius: 50px; background: none; border: 2px solid #fff; margin-right: 10px; cursor: pointer; .active background-color: #fff !important; .body a text-decoration: none; position: absolute; display: block; top: 50%; transform: translateY(-50%); height: 50px; width: 30px; background-size: 100% 60%; background-color: rgba(0,0,0,0.3); .left left: 0; background: url(‘../img/left.png‘) no-repeat center center; .right right: 0; background: url(‘../img/right.png‘) no-repeat center center;
页面结构 html 代码
<body> <div class="body"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <ul> <li class="active"></li> <li></li> <li></li> </ul> <a href="javascript:;" class="left"></a> <a href="javascript:;" class="right"></a> </div>
js部分，插件调用
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/slider.js"></script> <script type="text/javascript"> $.slider( imgElement:$(".body img"), liElement:$(".body li"), leftBtn:$(".left"), rightBtn:$(".right"), time:2000 ) </script>
封装的插件
(function($) function slider(options) this.opts=$.extend(,slider.defaluts,options); this._imgSlider(); //设置默认值 slider.defaluts= imgElement:null, liElement:null, leftBtn:null, rightBtn:null, time:2000 slider.prototype._imgSlider=function() var opts=this.opts, index=0, len=opts.imgElement.length, timeInter=null; if(opts.imgElement==‘‘) return; opts.imgElement.eq(0).show(); showTime(); //当鼠标经过 轮播停止，移开继续 opts.imgElement.hover(function() clearInterval(timeInter); , function() showTime(); ); //点击li 显示对应的图片 opts.liElement.click(function() var id=$(this).index(); show(id); ); //向左向右 opts.leftBtn.click(function() clearInterval(timeInter); --index; index=Math.max(0,index); show(index); showTime(); ); opts.rightBtn.click(function() clearInterval(timeInter); ++index; index=Math.min(len-1,index); show(index); showTime(); ); function showTime() timeInter=setInterval(function() index++; if(index>len) index=0; show(index); ,opts.time); function show(index) opts.imgElement.eq(index).fadeIn(1000).siblings(‘img‘).fadeOut(1000); opts.liElement.eq(index).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘); $.extend( slider:function(options) new slider(options); ) )(jQuery)
再给大家提供一个JavaScript实现图片轮播插件封装的详细的视频资料，
http://www.makeru.com.cn/live/1396_1066.html?s=45051
希望对大家的学习能够有所帮助。
以上是关于JavaScript实现图片轮播插件封装的主要内容，如果未能解决你的问题，请参考以下文章