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

本文主要是介绍翻页按钮，图片结束，按钮禁止点击，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

//翻页

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

    });

这篇关于翻页按钮，图片结束，按钮禁止点击的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---