老师帮忙看下,感觉有点不对劲呢
<!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 星