在使用Jquery/Javascript单击下一个和上一个按钮时动态添加图像
Add Images Dynamically as we click the next and previous button using Jquery/Javascript
最初显示4个缩略图,
我想将下一个和上一个按钮添加到缩略图容器中,即div拇指。我想为它编写功能。
有人能帮帮我吗。
HTML
<div id="gallery">
<div id="overlay"></div>
<div class="slidePanel">
<div id="panel">
<img id="largeImage" src="" />
</div>
<div class="slideBtn">
<a href="#" id="next">
<img src="images/left_arrow.png" /></a>
<a href="#" id="prev"><img src="images/right_arrow.png" /></a>
</div>
<div id="close">
<a href="#">Close</a>
</div>
</div>
<div id="thumbs" align="center">
<img src="images/image_01_thumb.jpg" alt="1st image description" />
<img src="images/image_02_thumb.jpg" alt="2nd image description" />
<img src="images/image_03_thumb.jpg" alt="3rd image description" />
<img src="images/image_04_thumb.jpg" alt="4th image description" />
</div>
</div>
JS
$(document).ready(function () {
function loadSlide(nSlide) {
$('#thumbs img.current').removeClass('current');
$(nSlide).addClass('current');
var src = $(nSlide).attr('src').replace('thumb', 'large');
$("#largeImage").fadeOut(function () {
this.src = src;
$(this).fadeIn();
}).center();
$("#overlay").css({
"opacity": "0.7"
}).fadeIn("slow");
$('#close a, #close').fadeIn();
$('#prev, #next').css('display', 'block');
}
$('#next').click(function () {
var cSlide = $('#thumbs img.current');
if ($(cSlide).next('img').length > 0) var nSlide = $(cSlide).next('img');
else var nSlide = $('#thumbs img:first');
loadSlide(nSlide);
});
$('#prev').click(function () {
var cSlide = $('#thumbs img.current');
if ($(cSlide).prev('img').length > 0) var nSlide = $(cSlide).prev('img');
else var nSlide = $('#thumbs img:last');
loadSlide(nSlide);
});
$('#thumbs img').click(function () {
loadSlide(this);
});
$("#panel").click(function () {
$(this).fadeOut("slow");
$("#overlay").fadeOut("slow");
});
$('#close a').click(function () {
$(this).fadeOut('slow');
$('#overlay, #panel, #prev, #next, #largeImage').fadeOut('slow');
$("#thumbs").css('display', 'block');
});
$('#thumbs img').click(function () {
$("#thumbs").css('display', 'none');
});
});
以下是我曾经用来实现自己的图像库的一些相关代码
function setImage(index){
var thumbRight = $('.thumb'+(index+1));
var thumbLeft = $('.thumb'+(index-1));
var img = $('.img' + index);
//set images and thumbs accordingly
}
$('.container').on('click', '.thumbTrigger', function(){
var direction = $(this).is('.thumbRight') ? 1 : -1;
var currIndex = //get index of current image in the list of images
setImage(currIndex + direction);
});
相关文章:
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 禁用旋转木马中的下一个按钮和上一个按钮
- 如何在用户返回和上一个按钮时刷新下拉列表
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- HTML5历史记录-返回上一个完整页面按钮
- 当我单击下一个或上一个按钮时,datatable显示旧值
- 如何在一个onclick按钮上使用一个javascript函数选择多个文本字段
- 为缩略图库和较大图像库添加下一个和上一个按钮
- 当滑块只有一个图像时,如何禁用下一个/上一个按钮
- 图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
- 如何在同一页面上的多个按钮上打开一个引导模式
- 如何在猫头鹰旋转木马中滑动所有可见项目,而不是使用上一个/下一个按钮
- 将“下一步”和“上一个”按钮添加到较大的图像
- 如何为滑块的分页按钮创建简单的下一个和上一个触发器按钮
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 单击上一个或继续按钮时更改选项卡样式
- 将下一个和上一个按钮添加到我的图像滑块
- JQuery,引导导航 - 如何添加上一个/下一个按钮
- 如何在cycle2.js中悬停img时同时显示上一个/下一个按钮
- & # 39;回# 39;按钮上一个模态弹出(Ajax模态弹出扩展器)