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

//翻页


//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');
            }
        }

    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值