为什么点击按钮不会切换图片？
来源：2-2 实例1图片相册之不使用预加载
慕无忌8331556
2017-05-18 00:18
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]);
});
写回答
关注
4回答
-
- trwzqh
- 2017-05-30 09:05:55
data-control（请问这个是什么意思）
-
- trwzqh
- 2017-05-30 09:04:16
还是不行呀，我用了你的代码，没反应的
-
- 李羊羊
- 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>我补全了一下，可以动，你对比下
-
- 李羊羊
- 2017-05-18 10:28:02
贴出来的没啥问题，最好贴下所有代码。怀疑picbox不是img的ID
图片预加载
预知发生的行为，提前加载需要的图片，获得更好的用户体验
40980 学习 · 81 问题
相似问题