语义化的图片幻灯效果

　　继上一篇语义化的Tab之后，又写了一个语义化的图片幻灯效果，同样是利用jquery写的，javascript代码好像有点复杂，暂时先这样了，一步一步来吧。

　　这里的html语义化，是为了页面丢掉css后能有更好的可读性，标题下可以对应相关的内容，至于SEO方面（还不太懂）暂没考虑。

　　下面请看效果：

图一

图二

图三

图四

下面是代码：

 

代码 
 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     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
 5     <script type="text/javascript" src="jquery.min.js"></script>
 6     <script type="text/javascript">
 7         $(function(){
 8             var iFocus = 0;
 9             var scrollTime;
10             var iMouseOut
11             autoScroll();
12             $(".joyan h3").each(function(i){
13                 $(this).mouseover(function(){
14                     StopScrolll();
15                     $(this).addClass("hover").siblings().removeClass("hover");
16                     $($(".joyan p")[i]).fadeIn("slow").siblings("p").hide();
17                 })
18                 $(this).mouseout(function(){
19                     iMouseOut = $(this).attr("id");
20                     iFocus = iMouseOut.substring(iMouseOut.length - 1); 
21                     autoScroll();
22                 })
23             })
24             
25             function autoScroll(){ 
26                 $(".joyan h3").eq(iFocus).addClass("hover").siblings("h3").removeClass("hover")
27                 $(".joyan p").eq(iFocus).fadeIn("slow").siblings("p").hide();
28                 iFocus++;
29                 iFocus = iFocus >= 4 ? 0 : iFocus;
30                 scrollTime = setTimeout(autoScroll, 2000);
31             }
32             function StopScrolll()
33             {
34                 clearTimeout(scrollTime);
35             }
36         })
37     </script>
38  <</span>style>
39 *{padding:0; margin:0;}
40 img{border:none;}
41 .joyan{width:320px; height:310px;  margin:10px; position:relative;}
42 .joyan h3{position:absolute; bottom:4px; width:80px; height:62px; padding-top:14px; }
43 .hover{background:#ccc url(images/dt-bg.jpg);}
44 .joyan h3 img{width:70px; height:62px; margin-left:5px;}
45 .joyan p{position:absolute; top:0; display:none;}
46 .joyan p img{padding:2px; border:1px solid #999; width:314px; height:224px;}
47 .joyan p span{position:absolute; left:4px; bottom:4px; display:block; width:313px; height:20px; line-height:20px; background:#000; text-align:center; opacity:0.5; filter:alpha(opacity=50); color:#fff;}
48 #f1{left:80px;}
49 #f2{left:160px;}
50 #f3{left:240px;}
51  </style>
52  </head>
53  <body>
54  <div class="joyan">
55         <h3 id="f0"><a href="#"><img src="http://baike.steelhome.cn/uploads/200906/1246090365N33pl5ea.jpg" /></a></h3>
56         <p>
57             <img src="http://baike.steelhome.cn/uploads/200906/1246090365N33pl5ea.jpg" />
58             <span>图一</span>
59         </p>
60         <h3 id="f1"><a href="#"><img src="http://qq.cndesign.com/pic/UploadFiles_7798/200705/20070501213726836.gif" /></a></h3>
61         <p>
62             <img src="http://qq.cndesign.com/pic/UploadFiles_7798/200705/20070501213726836.gif" />
63             <span>图二</span>
64         </p>
65         <h3 id="f2"><a href="#"><img src="http://qq.cndesign.com/pic/UploadFiles_7798/200705/20070501213725723.gif" /></a></h3>
66         <p>
67             <img src="http://qq.cndesign.com/pic/UploadFiles_7798/200705/20070501213725723.gif" />
68             <span>图三</span>
69         </p>
70         <h3 id="f3"><a href="#"><img src="http://www.qq1930.com/uploads/allimg/080829/1046384.gif" /></a></h3>
71         <p>
72             <img src="http://www.qq1930.com/uploads/allimg/080829/1046384.gif" />
73             <span>图四</span>
74         </p>
75  </div>
76  </body>
77  </html>
78  

 

posted @ 2010-06-18 14:06  我是警察谁知道  阅读(281)  评论(0)    收藏  举报