jQuery-切换事件2

最新推荐文章于 2024-09-08 18:41:13 发布

DragonWar%

最新推荐文章于 2024-09-08 18:41:13 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/longly/p/6597191.html

本文介绍了一种利用jQuery库实现网页中图片自动切换的方法。通过编写简单的JavaScript代码，可以轻松地让页面上的图片在几种状态间进行切换，并且每次切换时修改图片的标题属性以显示当前图片的路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>切换事件toggle</title>
 5     <script type="text/javascript" 
 6             src="Jscript/jquery-1.8.2.min.js">
 7     </script>
 8     <style type="text/css">
 9            body{font-size:13px} 
10            img{border:solid 1px #ccc;padding:3px}
11    </style>
12     <script type="text/javascript">
13         $(function() {
14             $("img").toggle(function() {
15                 $("img").attr("src", "Images/img05.jpg");
16                 $("img").attr("title", this.src);
17             }, function() {
18                 $("img").attr("src", "Images/img06.jpg");
19                 $("img").attr("title", this.src);
20             }, function() {
21                 $("img").attr("src", "Images/img07.jpg");
22                 $("img").attr("title", this.src);
23             })
24         })
25     </script>
26 </head>
27 <body>
28      <img />
29 </body>
30 </html>