                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS插件开发之LightBox图片画廊(上)

根据当前组别获取页面中所有相同组别的对象这一步卡住了

<!DOCTYPE html>

<html>

<head>

<title>lightbox开发</title>

</head>

<body>

<div>

<img

data-role="lightbox"

data-source="images/1-1.jpg"

src="images/1-1.jpg"

data-group="group-1"

data-id="jiushi"

data-caption="俄罗斯"

width="100" height="100" alt="">

</div>

<div>

<img

data-role="lightbox"

data-source="images/1-1.jpg"

src="images/1-4.jpg"

data-group="group-2"

data-id="jiushi"

data-caption="俄罗斯"

width="100" height="100" alt="">

</div>

<!-- <div id="G-lightbox-popup">

<div>

</div>

<div>

</div>

</div>

</div> -->

$(function(){

var lightbox = new LightBox();

})

</script>

</body>

</html>

请叫我橙子蛋

2017-03-14

源自：JS插件开发之LightBox图片画廊(上) 3-3

关注问题我要回答

1583

操作

收起

1 回答

请叫我橙子蛋提问者
2017-03-14

;(function($){

var LightBox = function(){

var self=this;

//创建遮罩和弹出框

this.popupMask = $('<div id="G-lightbox-mask">');

this.popupWin = $('<div id="G-lightbox-popup">');

//保存body

this.bodyNode = $(document.body);

//渲染DOM插入body

this.readerDOM();

//准备开发事件委托，获取组数据

this.groupName = null;

this.groupData = [];

this.bodyNode.delegate('.js-lightbox,*[data-role=lightbox]', 'click', function(e) {

//阻止事件冒泡，不触发到父标签

e.stopPropagation();

var currentGroupName = $(this).attr("data-group");

alert(currentGroupName);

if(currentGroupName!=self.groupName){

self.groupName = currentGroupName;

//获取一组数据根据当前组名

self.getGroup();

}

});

};

LightBox.prototype={

getGroup:function(){

var self = this;

//根据当前组别获取页面中所有相同组别的对象

var groupList = this.bodyNode.find("*[data-group="+this.groupName+"]");

alert(groupList);

}

readerDOM:function(){

var strDOM = '<div class="lightbox-pic-view">'+

'<span class="lightbox-btn lightbox-prev-btn"></span>'+

'<img class="lightbox-image" src="images/2-2.jpg" alt="" width="100%">'+

'<span class="lightbox-btn lightbox-next-btn"></span>'+

'</div>'+

'<div class="lightbox-pic-caption">'+

'<div class="lightbox-caption-area">'+

'<p class="lightbox-pic-desc"></p>'+

'<span class="lightbox-of-index">当前索引：1 of 4</span>'+

'</div>'+

'<span class="lightbox-close-btn"></span>'+

'</div>';

this.popupWin.html(strDOM);

this.bodyNode.append(this.popupMask,this.popupWin);

}

};

window["LightBox"]=LightBox;

})(jQuery);

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

JS插件开发之LightBox图片画廊(上)

参与学习 27071 人
解答问题 81 个

图片画廊插件开发综合演练，快来加入我们的课程吧

进入课程

本课相似问答

2 回答3-3中关于置为当前组别是否错误

2 回答关于获取节点对象

1 回答索引获取不到

1 回答无法获取图片尺寸？

1 回答；(function($){})(JQuey)在前面加;有什么用？

搜索更多本课相关问答

根据当前组别获取页面中所有相同组别的对象这一步卡住了

我要回答关注问题

热搜

最近搜索清空

根据当前组别获取页面中所有相同组别的对象这一步卡住了

1 回答

本课相似问答

根据当前组别获取页面中所有相同组别的对象这一步卡住了