如何获取最后一张和第一张幻灯片以相应地激活或禁用下一个和上一个按钮
how to get last and first slide to make next and previous button active or disable accordingly
我已经创建了这个滑块代码。。。
正在尝试获取第一张和最后一张幻灯片,以相应地激活或禁用下一个和上一个按钮。。。有人能帮我拿吗
$(document).ready(function(){
$('.myslider-wrapper').each(function(){
// thumbSlide
var countSlider = $('.thumbSlide', this).length;
if((".thumbSlide").length){
// Declare variables
var totalImages = $(".thumbSlide > li", this).length,
imageWidth = $(".thumbSlide > li:first", this).outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round($(".thumbSlide-wrap", this).width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth/countSlider);
$(".thumbSlide", this).width(totalWidth+10);
}
$(".thumbSlide-prev", this).click(function(){
var parentMove = $(this).parent().prev('.thumbSlide');
if(parentMove.position().left < 0 && !$(".thumbSlide").is(":animated")){
parentMove.animate({left : "+=" + imageWidth + "px"});
}
return false;
});
$(".thumbSlide-next", this).click(function(){
var parentMove = $(this).parent().prev('.thumbSlide');
if(parentMove.position().left > stopPosition && !$(".thumbSlide").is(":animated")){
parentMove.animate({left : "-=" + imageWidth + "px"});
}
return false;
});
});
});
jsfiddle:http://jsfiddle.net/GLSqS/1/
非常感谢。。
你可以这样做,而不是下一张和上一张的class。每个幻灯片都使用id来隐藏特定的一张,而不是全部,我把它留给你,
我对这个代码做了一些更改来显示和隐藏下一个和上一个按钮:
if($('.thumbSlide li:first')){
$('.thumbSlide-prev').hide();
}
$(".thumbSlide-prev", this).click(function(){
var parentMove = $(this).parent().prev('.thumbSlide');
$(".thumbSlide-next").show();
if(parentMove.position().left < 0 && !$(".thumbSlide").is(":animated")){
parentMove.animate({left : "+=" + imageWidth + "px"});
}else{
$('.thumbSlide-prev').hide();
}
return false;
});
$(".thumbSlide-next", this).click(function(){
var parentMove = $(this).parent().prev('.thumbSlide');
//var parent=$(this).parent();
$(".thumbSlide-prev").show();
if(parentMove.position().left > stopPosition && !$(".thumbSlide").is(":animated")){
parentMove.animate({left : "-=" + imageWidth + "px"});
}else{
$(".thumbSlide-next").hide();
}
return false;
});
演示Fiddle
我已经稍微修改了您的代码。试试下面的小提琴。
$(document).ready(function(){
$('.myslider-wrapper').each(function(){
// thumbSlide
var countSlider = $('.thumbSlide', this).length;
if((".thumbSlide").length){
// Declare variables
var totalImages = $(".thumbSlide > li", this).length,
imageWidth = $(".thumbSlide > li:first", this).outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round($(".thumbSlide-wrap", this).width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth/countSlider);
$(".thumbSlide", this).width(totalWidth+10);
}
$(".thumbSlide-prev", this).click(function(){
var parentMove = $(this).parent().prev('.thumbSlide');
if(parentMove.position().left < 0 && !$(".thumbSlide").is(":animated")){
parentMove.animate({left : "+=" + imageWidth + "px"});
$(this).parent().find('.disable').removeClass('disable');
}else{
$(this).parent().find('.thumbSlide-prev').addClass('disable');
}
return false;
});
$(".thumbSlide-next", this).click(function(){
var parentMove = $(this).parent().prev('.thumbSlide');
if(parentMove.position().left > stopPosition && !$(".thumbSlide").is(":animated")){
parentMove.animate({left : "-=" + imageWidth + "px"});
$(this).parent().find('.disable').removeClass('disable');
}else{
$(this).parent().find('.thumbSlide-next').addClass('disable');
}
return false;
});
});
});
更新的Fiddle
相关文章:
- 有人能提供一张ember数据与broswer's的持久层
- jQuery只隐藏<tr>在一张桌子上
- 如何从三张图片中选择一张?其余的必须是看不见的
- 通过onclick事件将一张图片更改为6张图片
- Sequelize hasMany浏览另一张表
- jm按下停止步骤进入滚动的下一张幻灯片
- 我用JavaScript FIleReader读了一张图片,但是我无法得到图片的信息
- 当 Flickity 到达下一张或上一张幻灯片时的事件
- 单击从一张图像切换到两张图像,然后再切换回一张图像
- 单击另一张图像,显示一张图像几秒钟
- 为什么bxSlider会打断我在最后一张幻灯片和第一张幻灯片之间的转换
- 用d3和topojson绘制一张地图
- 引导程序3转盘-随机选择下一张幻灯片
- 每张图片都比前一张少
- HTML5画布如何在另一张图片上绘制一张图片
- 拍摄一张巨大的网页截图(大小超过1350x13500px)
- 如何在最后一张幻灯片上停止动画
- 完整的背景图片幻灯片jquery,想让幻灯片的最后一张图片可以点击
- jqplot只在一张图表上显示荧光笔
- 如何获取最后一张和第一张幻灯片以相应地激活或禁用下一个和上一个按钮