Javascript 使用幻灯片创建JQuery灯箱

您好我正在使用幻灯片创建简单的JQuery LightBox，所以我需要的是，当我单击任何图像时，我希望将该图像添加到img标记中，它位于Class.LightBox的Div中，单击“下一步”时，代码将获取当前图像的下一个图像，单击“上一步”时，代码将获取当前图像的上一个图像：

秒：我想在滑块之间添加淡入淡出效果。
注意：我想更多地了解JavaScript和JQuery，所以请不要推荐任何插件

$（文档）.ready（函数（）{
$（“.image img”）。单击（函数（e）{
e、 预防默认值（）；
$（“.lightbox img”）.attr（“src”），$（this.attr（“src”））；
});
$（“.lightbox.next”）。单击（函数（e）{
e、 预防默认值（）；
});
})

.image{
宽度：200px；
浮动：左；
}
.图像img{
宽度：100%；
高度：自动；
}
.clearfix{
明确：两者皆有；
}
.灯箱{
宽度：300px；
高度：300px；
位置：相对位置；
保证金：50px自动；
边框：2px实心#0094ff；
文本对齐：居中；
线高：300px；
字体大小：40px；
}
.灯箱img{
宽度：100%；
高度：自动；
位置：绝对位置；
排名：0；
左：0；
}
.灯箱分区{
位置：绝对位置；
排名：0；
右：0；
底部：0；
宽度：50px；
背景色：rgba（0,234,119,0.80）；
光标：指针；
} 
.灯箱，左边{
右：0；
左：0；
}

看看这个

我只在你的

js

更新：添加了上一个按钮和淡入淡出效果

更新2：提供一些可以帮助您开发幻灯片的想法

$（文档）.ready（函数（）{
var first_img=$（“.image img:first”）；
var last_img=$（“.image img:last”）；
$（“.lightbox img”）.attr（“src”，first_img.attr（“src”））；
$（“.image img”）。单击（函数（e）{
$（“.lightbox img”）.attr（“src”），$（this.attr（“src”））；
});
$（“.lightbox.next”）。单击（函数（e）{
var img=$（'.image img[src=“'+$（this）.parent（）.find（'img'）.attr（'src'）+'“]）.parent（）.next（'div'）.find（'img'）；
如果（img.length==0）{img=first\u img；}
$（“.lightbox img”）.attr（“src”，img.attr（“src”））.stop（true，true）.hide（）.fadeIn（200）；
});
$（“.lightbox.prev”）。单击（函数（e）{
var img=$（'.image img[src=“'+$（this）.parent（）.find（'img'）.attr（'src'）+'”]）.parent（）.prev（'div'）.find（'img'）；
如果（img.length==0）{img=last_img；}
$（“.lightbox img”）.attr（“src”，img.attr（“src”））.stop（true，true）.hide（）.fadeIn（200）；
});
});
.image{
宽度：200px；
浮动：左；
}
.图像img{
宽度：100%；
高度：自动；
}
.clearfix{
明确：两者皆有；
}
.灯箱{
宽度：300px；
高度：300px；
位置：相对位置；
保证金：50px自动；
边框：2px实心#0094ff；
文本对齐：居中；
线高：300px；
字体大小：40px；
背景色：rgba（0,234,119,0.80）；
}
.灯箱img{
宽度：100%；
高度：自动；
位置：绝对位置；
排名：0；
左：0；
}
.灯箱，下一个{
位置：绝对位置；
排名：0；
右：0；
底部：0；
宽度：50px；
背景色：rgba（0,234,119,0.80）；
光标：指针；
}
.灯箱{
位置：绝对位置；
排名：0；
左：0；
底部：0；
宽度：50px；
背景色：rgba（0,234,119,0.80）；
光标：指针；
}
试试这个，在单击图像的同时制作一个图像数组，然后在
上显示它们。下一步
单击


$（文档）.ready（函数（）{
var图像=[]；
var j；
$（“.image img”）。单击（函数（e）{
e、 预防默认值（）；
j=$（this.attr（“src”）；
$（“.lightbox img”）.attr（“src”，j）；
图像。推（j）；
});
var i=0；
$（“.lightbox.next”）。单击（函数（e）{
$（“.lightbox img”）.attr（“src”，图像[i]）；
我++
});
})
.image{
宽度：200px；
浮动：左；
}
.图像img{
宽度：100%；
高度：自动；
}
.clearfix{
明确：两者皆有；
}
.灯箱{
宽度：300px；
高度：300px；
位置：相对位置；
保证金：50px自动；
边框：2px实心#0094ff；
文本对齐：居中；
线高：300px；
字体大小：40px；
}
.灯箱img{
宽度：100%；
高度：自动；
位置：绝对位置；
排名：0；
左：0；
}
.灯箱，下一个{
位置：绝对位置；
排名：0；
右：0；
底部：0；
宽度：50px；
背景色：rgba（0,234,119,0.80）；
光标：指针；
}

您可以使用这样的免费插件：谢谢您的帮助，但我需要的是从Scratch创建Lightbox幻灯片非常感谢Leaon Klaj，请我将更新代码添加上一个按钮，以便您能帮助我使用上一个按钮和淡入效果：）@MichaelNeas，我已经更新了代码以添加上一个和淡入淡出效果。非常感谢。请在下一个单击函数中向我解释代码。$（this）.parent（）.find（'img'）。attr（'src'）为我提供lightbox中图像的src。有了这些信息，我得到了div.image的下一个图像，在lightbox中的图像位于div之后。谢谢，$（这）是返回的Body元素，所以$（这）是什么意思呢？lightbox.next或.image img。非常感谢，请我将更新代码以添加previous按钮，以便您能帮助我使用previous按钮和淡入效果：），我想了解更多有关Javascript的信息，再次感谢您的帮助，但我检查了您的代码，但它不工作。为什么？上面的代码片段工作得很好，请在控制台中检查错误，对于“上一个”按钮，只需添加另一个