老师帮忙看下,感觉有点不对劲呢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全屏的云南旅游相册</title> <link rel="stylesheet" href="css/css.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/index.js"></script> </head> <body> <span></span> <nav> <a href="#">泸沽湖</a> <a href="#">丽江古城</a> <a href="#">茶马古道</a> <a href="#">就这家·云逸客栈</a> <a href="#">西双版纳</a> <a href="#">云南红酒庄</a> <a href="#">轿子雪山</a> <a href="#">普者黑</a> <a href="#">海埂大坝</a> <a href="#">玉龙湾</a> <a href="#">昆明郊野公园</a> <a href="#">欧洲风琴小镇</a> </nav> <div> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> <img src="images/4.jpg"> <img src="images/5.jpg"> <img src="images/6.jpg"> <img src="images/7.jpg"> <img src="images/8.jpg"> <img src="images/9.jpg"> <img src="images/10.jpg"> <img src="images/11.jpg"> <img src="images/12.jpg"> </div> </body> </html>
$(document).ready(function(){
var index = 0;
var swiper = function(){
$('img')
.eq(index)
.css({'opacity':'1'})
.siblings()
.css({'opacity':'0'})};
// $('a').click(function(){
// $('img')
// .eq($(this)
// .index())
// .css({'opacity':'1'})
// .siblings()
// .css({'opacity':'0'});
// });
$(document).keydown(function(event){
if(event.keyCode == 37){
if(index == 0){
index = $('a').length - 1;
}else{
index --;
}
swiper();
}else if(event.keyCode == 39){
if(index == $('a').lenght - 1){
index = 0;
}else{
index ++;
}
}swiper();
})
});23
收起
正在回答
2回答
同学你好,可以参考下方:
1、打开页面时,显示的是最后一张图片,index的初始值为0,按左键时,符合index == 0的条件,index就等于$('a').length - 1,显示的是最后一张,也就是说最后一张显示了两次,在视觉上感觉没有变化,因此按两次图片才会发生变化。建议:可以先调用下swiper,默认显示索引为0的图片。如下:

2、按右键按了几次图片就不会改变了,原因是单词写错了,可以参考下方:

祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星