jQuery之焦点图

2016-12-12 08:29:23来源:cnblogs.com作者:fighting_liu人点击

第七城市
 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写一个点击事件。

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台