图片加载不出来

Question

当点击前后按钮，图片前进或后退，但不知道为什么图片加载不出来，我console.log($('#img').attr('src'));点一下，只在浏览器中闪一下，就没有了，我看了很久，觉得代码应该没有写错，请大家看下我到底是哪里错了，谢谢

Answer 1

1.你用<a>标签实现点击，但是<a>标签是超链接，所以会有一个默认跳转的动作，目的地址就是href属性;

2.所以你每次点击后都会跳到那个href里的内容去，你这里是空白，所以会刷新页面;

3.这里有两种解决办法

4.第一种是给href加"#"，这个是页面锚点的意思，你自己去查查，由于你页面没锚点，所以不会跳

  <p>

    <a href="#" class="btn" data-control="prev">上一页</a>

    <a href="#" class="btn" data-control="next">下一页</a>

  </p>

5.第二种是阻止<a>标签的跳转行为，在点击事件的回调函数里写

  $('.btn').on('click', function() {

    if ('prev' === $(this).data('control')) { //上一张

      index = Math.max(0, --index);

    } else { //下一张

      index = Math.min(lens - 1, ++index);

    }

    

    var a = $('#img').attr('src', 'images/' + img[index]);

    console.log($('#img').attr('src'));

    return false // 阻止跳转

  })

6.第二种方法更标准的写法是e.preventDefault()，但我估计你没学到事件，所以先用上面的，后面你学到了想起来可以查一下