您的位置:首页 > 其它

翻页按钮,图片结束,按钮禁止点击

2015-12-18 10:29 260 查看
//翻页

//html代码

<div class="calendar-real">

<img src="">

<img src="">

<img src="">

<img src="">

</div>

//jauery代码

var $carouselNum = $('.calendar-real')

var j = 0,

k = 0,

t = 0;

//减去最后一屏显示的图片数量

var len =
$carouselNum.children().length-1;

//上一张按钮

$pre.on('click', function(e) {

if( j > 0) {

j--;

$carouselNum.animate({marginLeft: '-'+ 404*j}, 800);//404为图片的宽度

if(j == 0) {

$(this).addClass('pre-before-btn').removeClass('pre-after-btn');//第一张图片,则上一张按钮禁止点击

$(this).css('cursor','default');//不再是小手样式

}else {

$next.addClass('next-before-btn').removeClass('next-after-btn');//下一张按钮可点击,

$next.css('cursor','pointer');小手样式

}

}

});

//下一张按钮

$next.on('click', function(e) {

e.preventDefault();

if(j < len){

j++;

$carouselNum.animate({marginLeft: '-'+ 404*j},800);

k =j;

if(j > 0) {

$pre.addClass('pre-after-btn').removeClass('pre-bafore-btn');//可点击

$pre.css('cursor','pointer');

}

if(j == len) {

$next.addClass('next-after-btn').removeClass('next-before-btn');//最后一张,不可点击

$(this).css('cursor','default');

}

}

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: