|
阅读：8703回复：4
前端学习：封装一个灯箱
封装一个灯箱
效果图： 图片：fz.png  效果图为每行三张图进行排列，每张图可以点击进去查看大图，查看大图有轮播效果，轮播顺序为灯箱的图片的顺序，并且无限轮播； 查看大图的样式： 图片：7XKMC5U{7`TIEXWZVR)HI{F.png 调用方法： html部分： <div class="xiDe_DengXiangList">
<figure>
<img src="img/1.jpg">
<figcaption>不要出BUG了</figcaption>j]
</figure>
<figure>
<img src="img/2.jpg">
<figcaption>不要出BUG了</figcaption>
</figure>
<figure>
<img src="img/3.jpg">
<figcaption>不要出BUG了</figcaption>
</figure>
<figure>
<img src="img/4.jpg">
<figcaption>不要出BUG了</figcaption>
</figure>
<figure>
<img src="img/5.jpg">
<figcaption>不要出BUG了</figcaption>
</figure>
<figure>
<img src="img/6.jpg">
<figcaption>不要出BUG了</figcaption>
</figure>
<figure>
<img src="img/7.jpg">
<figcaption>不要出BUG了</figcaption>
</figure>
<figure>
<img src="img/8.jpg">
<figcaption>不要出BUG了</figcaption>
</figure>
</div>img src属性是自定的灯箱的图片地址figcaption标签中写灯箱图片上的提示文字 实现效果： 首先需要引入jQuery和我的封装的js文件和css文件(代码在最后) 然后调用函数： //调用方法
//sort的值 toleft 从左向右排序
//center 每行居中排序
xiDeSSH({
sort:"toleft"
})sort后面可以带两个参数 toleft和center意思为最后一排不满三张图时的排序方法; 如果不想改变排序样式可以直接调用 xiDeSSH(); 默认样式为toleft样式 toleft排序样式： 图片：tl.png center排序样式： 图片：c (1).png css样式： .xiDe_DengXiangList{
/*width: 100%;*/
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*-webkit-justify-content: space-around;*/
/*justify-content: space-around;*/
padding:30px 300px;
}
.xiDe_DengXiangflexFN{
-webkit-justify-content: space-around;
justify-content: space-around;
}
.xiDe_DengXiangList>figure{
width: 400px;
height: 400px;
margin: 10px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.xiDe_DengXiangList>figure>img{
height: 400px;
}
.xiDe_DengXiangList>figure>figcaption{
width: 300px;
height: 100px;
color: white;
border: 5px solid white;
font-size: 30px;
font-weight: 600;
text-align: center;
line-height: 100px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
opacity:0 ;
transition: all .5s ease;
}
.xiDe_DengXiangList>figure:hover>figcaption{
opacity: 1;
}
.xiDe_DengXiangLunBoBox{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
transition: all .3s ease;
}
.xiDe_DengXiangLunBoXianShiBox{
width: 1200px;
height: 700px;
border: 10px solid white;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: hidden;
}
.xiDe_DengXiangLunBoXianShiBox>img{
height: 700px;
}
#xiDe_DengXingLunBoBoxEnd{
position: absolute;
right:10px;
top: 10px;
font-size: 40px;
color: white;
font-weight: 600;
cursor: pointer;
}
#xiDe_DengXingLunBoBoxMoveRight{
position: absolute;
font-size: 100px;
color: white;
font-weight: 600;
top: 300px;
right:10px;
cursor: pointer;
}
#xiDe_DengXingLunBoBoxMoveLeft{
position: absolute;
font-size: 100px;
color: white;
font-weight: 600;
top: 300px;
left:10px;
cursor: pointer;
}
.xiDe_LunBoDisend{
/*display: none;*/
visibility: hidden;
opacity: 0;
}js：function xiDeSSH(set) {
function setFN() {
if(set){
set.sort = set.sort || {};
if (set.sort != {}){
if(set.sort == "center"){
$(".xiDe_DengXiangList").addClass("xiDe_DengXiangflexFN");
}
else if(set.sort == "toleft"){
//toleft为默认样式
}
else{
console.log("EEROR::'sort' TYPE ERRON 'sort=toleft/center'");
return;
}
}
}
}
setFN();
//生成moti
let x_bodyNode = document.getElementsByTagName("body")[0];
function xiDe_MotiPrototype() {
this.bigBoxdiv = document.createElement("div");
this.xianShiduv = document.createElement("div");
this.imgNode = document.createElement("img");
this.endBox = document.createElement("div");
this.rightMove = document.createElement("div");
this.leftMove = document.createElement("div");
this.init =function () {
this.bigBoxdiv.className = "xiDe_DengXiangLunBoBox xiDe_LunBoDisend";
this.xianShiduv.className = "xiDe_DengXiangLunBoXianShiBox";
this.imgNode.src = "";
this.endBox.id = "xiDe_DengXingLunBoBoxEnd";
this.rightMove.id="xiDe_DengXingLunBoBoxMoveRight";
this.leftMove.id="xiDe_DengXingLunBoBoxMoveLeft";
this.endBox.innerHTML = "X";
this.rightMove.innerHTML = ">";
this.leftMove.innerHTML ="<";
this.xianShiduv.appendChild(this.imgNode);
this.xianShiduv.appendChild(this.endBox);
this.xianShiduv.appendChild(this.rightMove);
this.xianShiduv.appendChild(this.leftMove);
this.bigBoxdiv.appendChild(this.xianShiduv);
x_bodyNode.appendChild(this.bigBoxdiv);
};
this.init()
}
xiDe_MotiPrototype();
function xiDe_LunBO() {
$(".xiDe_DengXiangList>figure").on("click",xiDe_banKuaiDianJi);
$("#xiDe_DengXingLunBoBoxEnd").on("click",xiDe_motiEnd)
}
function xiDe_banKuaiDianJi() {
$(".xiDe_DengXiangLunBoBox").removeClass("xiDe_LunBoDisend");
let x_lunBorImgArr = [];
let x_ImgNodeSrc = $(".xiDe_DengXiangList img");
for(let i = 0;i < x_ImgNodeSrc.length;i++){
x_lunBorImgArr.push(x_ImgNodeSrc[i].getAttribute("src"))
}
let x_clickImgSrc = $(this).children("img").attr("src");
let x_LunBoIndex = x_lunBorImgArr.indexOf(x_clickImgSrc);
$(".xiDe_DengXiangLunBoXianShiBox").children(":nth-child(1)").attr("src",x_clickImgSrc);
$("#xiDe_DengXingLunBoBoxMoveRight").on("click",function () {
x_LunBoIndex++;
if(x_LunBoIndex == x_lunBorImgArr.length-1){
x_LunBoIndex = 0;
}
xiDe_motiMoveR(x_lunBorImgArr,x_LunBoIndex)
});
$("#xiDe_DengXingLunBoBoxMoveLeft").on("click",function () {
x_LunBoIndex--;
if(x_LunBoIndex == -1){
x_LunBoIndex = x_lunBorImgArr.length-1;
}
xiDe_motiMoveL(x_lunBorImgArr,x_LunBoIndex)
})
}
function xiDe_motiMoveR(x_lunBorImgArr,x_LunBoIndex) {
$(".xiDe_DengXiangLunBoXianShiBox").children(":nth-child(1)").attr("src",x_lunBorImgArr[x_LunBoIndex]);
}
function xiDe_motiMoveL(x_lunBorImgArr,x_LunBoIndex) {
$(".xiDe_DengXiangLunBoXianShiBox").children(":nth-child(1)").attr("src",x_lunBorImgArr[x_LunBoIndex]);
}
function xiDe_motiEnd() {
$(".xiDe_DengXiangLunBoBox").addClass("xiDe_LunBoDisend")
}
xiDe_LunBO()
} |
|
|
板凳#
发布于：2020-05-18 08:58
大佬牛批
|
|
|
地板#
发布于：2020-05-17 07:37
大佬，666
|
|
|
