jQuery之焦点图
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>焦点图</title> 6 <style type="text/css"> 7 img{position: relative;} 8 ul{list-style: none;width: 545px;position: absolute;top: 280px;left: 170px;} 9 li{float: left;width: 20px;line-height: 18px;border: 1px solid #ccc;background-color:#494a93;} 10 a:hover{background-color: red;} 11 a{display: block;width: 20px;line-height: 18px;color: white;text-decoration: none;text-align: center;font-size: 12px;font-family: arial;} 12 p{width: 480px;text-align: center;} 13 </style> 14 </head> 15 <body> 16 <img src="images/1.jpg" alt=""> 17 <ul> 18 <li><a href="images/1.jpg" title="日落">1</a></li> 19 <li><a href="images/2.jpg" title="钢琴">2</a></li> 20 <li><a href="images/3.jpg" title="大海">3</a></li> 21 <li><a href="images/4.jpg" title="秋色">4</a></li> 22 </ul> 23 <p>这是一段测试文字</p> 24 <script src="js/jquery-3.0.0.js"></script> 25 <script type="text/javascript">
//方法一：超级简单易懂的方法 26 /*$("ul li:nth-child(1) a").click(function(event){ 27 $("img").attr("src","images/1.jpg") 28 29 var imgsrc=$(this).attr("href") 30 $("img").attr("src",imgsrc) 31 32 $("img").attr("src",$(this).attr("href")) 33 34 $("ul li:nth-child(1)").css("background-color","red") 35 $("ul li:nth-child(2)").css("background-color","#494a93") 36 $("ul li:nth-child(3)").css("background-color","#494a93") 37 $("ul li:nth-child(4)").css("background-color","#494a93") 38 event.preventDefault(); 39 }) 40 $("ul li:nth-child(2) a").click(function(event){ 41 $("img").attr("src","images/2.jpg") 42 43 var imgsrc=$(this).attr("href") 44 $("img").attr("src",imgsrc) 45 46 $("ul li:nth-child(2)").css("background-color","red") 47 $("ul li:nth-child(1)").css("background-color","#494a93") 48 $("ul li:nth-child(3)").css("background-color","#494a93") 49 $("ul li:nth-child(4)").css("background-color","#494a93") 50 event.preventDefault(); 51 }) 52 $("ul li:nth-child(3) a").click(function(event){ 53 $("img").attr("src","images/3.jpg") 54 55 var imgsrc=$(this).attr("href") 56 $("img").attr("src",imgsrc) 57 58 $("ul li:nth-child(3)").css("background-color","red") 59 $("ul li:nth-child(2)").css("background-color","#494a93") 60 $("ul li:nth-child(1)").css("background-color","#494a93") 61 $("ul li:nth-child(4)").css("background-color","#494a93") 62 event.preventDefault(); 63 }) 64 $("ul li:nth-child(4) a").click(function(event){ 65 $("img").attr("src","images/4.jpg") 66 67 var imgsrc=$(this).attr("href") 68 $("img").attr("src",imgsrc) 69 70 $("ul li:nth-child(4)").css("background-color","red") 71 $("ul li:nth-child(2)").css("background-color","#494a93") 72 $("ul li:nth-child(3)").css("background-color","#494a93") 73 $("ul li:nth-child(1)").css("background-color","#494a93") 74 event.preventDefault(); 75 })*/
//方法二：简化了方法一重复的代码量 ，利用.parent().siblings().find("a")选择到父级的其他兄弟元素
76 $("ul li a").click(function(event){ 77 /*$("img").attr("src","images/4.jpg")*/ 78 79 var imgsrc=$(this).attr("href"); 80 $("img").attr("src",imgsrc); 81 82 $(this).css({"background-color":"red","color":"yellow"}); 83 $(this).parent().siblings().find("a").css({"background-color":"#494a93","color":"white"}); 84 event.preventDefault(); 85 86 var txt=$(this).attr("title"); 87 console.log(txt); //在控制台输出 88 $("p").text(txt); 89 }) 90 /*$("ul li a").hover(function(event){ 91 $(this).css("background-color","red"); 92 },function(){ 93 $(this).css("background-color","#494a93") 94 })*/ 95 </script> 96 </body> 97 </html>
以上是一个简单地焦点图事例，思路：图片路径写在a标签的href属性里，点击a得到$(this).attr("href");并把这个值给img的src。用简单地jQuery写一个点击事件。
