首頁  >  問答  >  主體

javascript - 图片轮播问题


一个图片轮播效果点击左右按钮已经可以切换,但是我想当它到最左的li时候无法再向右右滑动,
当他到最右的li时候无法再向左滑动。就是不要循环效果,第一张到最后一张 按钮无法点击,不在点击循环到第一张,怎么判断呢

var prev = wraper.find('.prev');

      var next = wraper.find('.next');
      var img = wraper.find('.img-list').find('ul');
      var w = img.find("li").outerWidth(true);
      var s = config.speed;
      
      prev.click(function(){
              
            img.animate({'margin-left':-w},function()
                      {
                       img.find('li').eq(0).appendTo(img)
                       img.css({'margin-left':0});
                       });
            });
      next.click(function(){    
            img.find('li:last').prependTo(img);
            img.css({'margin-left':-w});
            img.stop(true).animate({'margin-left':0});
            });
巴扎黑巴扎黑2767 天前546

全部回覆(2)我來回復

  • PHP中文网

    PHP中文网2017-04-11 10:36:35

    如果不想浪费时间,可以看看slick.js目前最好的轮播插件之一。屡试不爽。http://kenwheeler.github.io/slick/

    回覆
    0
  • 迷茫

    迷茫2017-04-11 10:36:35

    简单就先执行边界判断,判断你自己设定的margin-left的值是否到了左右两个边界值

    回覆
    0
  • 取消回覆