jQuery练习4京东商品详情页面（移动小图片）

视频

function moveMiniImg () {
    var $as = $('#preview>h1>a')
    var $backward = $as.first();
    var $forward = $as.last();
    var $Ul =  $('#icon_list')
    var SHOW_COUNT = 5
    var imgCount = $Ul.children('li').length
    var moveCount = 0//移动次数（向右为正，向左为负（箭头）
    var liWidth = $Ul.children(':first').width()
    //初始化更新
    if(imgCount > SHOW_COUNT){
        //$forward[0].className = 'forward'
        $forward.attr('class', 'forward')
    }

    //给向右按钮绑定监听
    $forward.click(function(){
        //判断是否需要移动，如果不需要直接结束
        //不能和下面同样的代码合并的原因是，每次不可操作样式点击的时候，没必要多改变样式
        if(moveCount === imgCount - SHOW_COUNT) {
            return
        }
        moveCount ++
        //向左按钮变为不可操作样式
        $backward.attr('class', 'backward')
        //已经到了最后一个图，向右按钮要变为不可操作样式
        if(moveCount === imgCount - SHOW_COUNT) {
            $forward.attr('class', 'forward_disabled')
        }
        //移动ul
        $Ul.css({
            left : -moveCount * liWidth
        })
    })

    //给向左按钮绑定监听
    $backward.click(function(){
        //判断是否需要移动，如果不需要直接结束
        //不能和下面同样的代码合并的原因是，每次不可操作样式点击的时候，没必要多改变样式
        if(moveCount === 0) {
            return
        }
        moveCount --
        //向右按钮变为不可操作样式
        $forward.attr('class', 'forward')
        //已经到了第一个图，向左按钮要变为不可操作样式
        if(moveCount === 0) {
            $backward.attr('class', 'backward_disabled')
        }
        //移动ul
        $Ul.css({
            left : -moveCount * liWidth
        })
    })
}

//9. 点击向右/左, 移动当前展示商品的小图片
function movePic() {
  var $preview = $('#preview')
  var $backward = $preview.children('h1').children('a:eq(0)')
  var $forward = $preview.children('h1').children('a:eq(1)')
  var $iconList = $('#icon_list')
  var WIDTH = 5
  var PIC_WIDTH = 62
  var counter = 0 //左侧的图片的数量
  var THRESHOLD = 0 //阈值

  //初始化
  //检查有几张图片
  var pics = $iconList.children('li').length
  var THRESHOLD = pics - WIDTH
  if (pics > WIDTH) {
    //调节按钮
    $forward.attr('class', 'forward')
    //列表的宽度
    $iconList.width(pics * PIC_WIDTH)
  }

  //事件响应
  $forward.click(function () {
    //检查当前状态
    var currentState = $(this).attr('class')
    if ('forward_disabled' !== currentState) {
      counter++
      $iconList.css({
        left: -PIC_WIDTH * counter
      })
      if (counter === THRESHOLD) {
        //把按钮设置为 不可用状态
        $forward.attr('class', 'forward_disabled')
      }
      if (counter > 0) {
        //把左侧按钮设置为 可用状态
        $backward.attr('class', 'backward')
      }
    }
  })
  $backward.click(function () {
    //检查当前状态
    var currentState = $(this).attr('class')
    if ('backward_disabled' !== currentState) {
      counter--
      $iconList.css({
        left: -PIC_WIDTH * counter
      })
      if (counter === 0) {
        //把按钮设置为 不可用状态
        $backward.attr('class', 'backward_disabled')
      }
      if (counter < THRESHOLD) {
        //把左侧按钮设置为 可用状态
        $forward.attr('class', 'forward')
      }
    }
  })
}