首页 / JAVASCRIPT / js图片轮播插件的封装
js图片轮播插件的封装
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js图片轮播插件的封装,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2698字,纯文字阅读大概需要4分钟。
内容图文
![js图片轮播插件的封装](/upload/InfoBanner/zyjiaocheng/343/19634a8644e846db93285ebcfa04a2de.jpg)
本文为大家分享了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)
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的js图片轮播插件的封装全部内容,希望文章能够帮你解决js图片轮播插件的封装所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。