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

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

源自：图片预加载 2-2

关注问题我要回答

1376

操作

收起

4 回答

trwzqh
2017-05-30

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

0 回复有任何疑惑可以回复我~

#1

慕无忌8331556 提问者

自定义属性

2017-05-30 回复有任何疑惑可以回复我~

trwzqh
2017-05-30

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

0 回复有任何疑惑可以回复我~

李羊羊
2017-05-18

我把你的稍微改了一下：

<!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 回复有任何疑惑可以回复我~

#1

慕无忌8331556 提问者

哦，我知道了，让代码在文档加载后执行。谢谢！

2017-05-18 回复有任何疑惑可以回复我~

李羊羊
2017-05-18

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

0 回复有任何疑惑可以回复我~

#1

慕无忌8331556 提问者

<div class="box"> <img id="picbox" src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="pic" width="1200"/> <p> <a href="javascript:;" class="btn" data-control="prev">上一张</a> <a href="javascript:;" class="btn" data-control="next">下一张</a> </p> </div>

2017-05-18 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

图片预加载

参与学习 40979 人
解答问题 81 个

预知发生的行为，提前加载需要的图片，获得更好的用户体验

本课相似问答

2 回答图片未加在成功，点击下一页还是当前图片还是当前图片

1 回答点击上一页时，有重新加载图片了

2 回答为什么预加载图片都变成403

2 回答什么会循环，一直没看懂这点

1 回答图片的路径

搜索更多本课相关问答

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

我要回答关注问题

意见反馈帮助中心 APP下载