问答详情
源自：2-2 实例1图片相册之不使用预加载

为什么点击按钮不会切换图片？

var imgs=[
  'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
  'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg',
  'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',
  'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg'
 ];
var index=0;
var lens=imgs.length;
$('.btn').on('click',function () {
 if ('prev'===$(this).data('control')) {
   index=Math.max(0,--index);
 }
    else {
     index=Math.min(lens-1,++index);
    }
    document.title=(index+1)+"/"+lens;
    $("#picbox").attr('src',imgs[index]);
});

提问者：慕无忌8331556 2017-05-18 00:18

个回答

  • trwzqh
    2017-05-30 09:05:55

    data-control（请问这个是什么意思）

    0
  • trwzqh
    2017-05-30 09:04:16

    还是不行呀，我用了你的代码，没反应的

    0
  • 李羊羊
    2017-05-18 15:34:50

    我把你的稍微改了一下：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <img id="picbox" src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="pic" width="1200"/>
        <p>
            <a href="javascript:;" data-control="prev">上一张</a>
            <a href="javascript:;" data-control="next">下一张</a>
        </p>
    </div>

    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {
            var imgs=[
                'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
                'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg',
                'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',
                'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg'
            ];
            var index=0;
            var lens=imgs.length;
            $('.btn').on('click',function () {
                if ('prev'===$(this).data('control')) {
                    index=Math.max(0,--index);
                } else {
                    index=Math.min(lens-1,++index);
                }
                document.title=(index+1)+"/"+lens;
                $("#picbox").attr('src',imgs[index]);
            });
        });
    </script>
</body>
</html>

    我补全了一下，可以动，你对比下

    0
  • 李羊羊
    2017-05-18 10:28:02

    贴出来的没啥问题，最好贴下所有代码。怀疑picbox不是img的ID

    0