扫码点餐小程序_js图片轮播插件的封装

js图片轮播插件的封装     -碧-菡   这篇文章主要为大家详细介绍了js图片轮播插件的封装代码,只需要获取到图片和按钮,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文为大家分享了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 
 img src="img/1.jpg" 
 img src="img/2.jpg" 
 img src="img/3.jpg" 
 li /li 
 li /li 
 li /li 
 /ul 
 a href="javascript:;" /a 
 a href="javascript:;" /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 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)

效果图

精彩专题分享:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读