自写Jquery图片展示效果
今天因网站需要写了个图片展示效果,其中用到了Jquery的data函数，刚学就被我用这了，昨天看时还觉得无甚用处，因为可以人为地给一个节点加属性嘛，不过省却了几句代码而已。
Jquery图片展示效果
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>Jquery图片展示</title>
6 <style type="text/css">
7 *{ margin:0px; padding:0px; list-style:none; border:0px;}
8 body{ font-size:12px; color:white;}
9 #imageShow{ position:relative; width:586px; height:150px; z-index:1; overflow:hidden;}
10 #imageShow #imageSwitch{ position:absolute; right:0px; bottom:0px; padding-left:50px; z-index:2; background-color:#C08A93; filter: Alpha(opacity=70); opacity:0.7;}
11 #imageShow #imageSwitch li{ float:left; border-left:1px solid white; width:30px; height:14px; line-height:14px; text-align:center;}
12 </style>
13 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
14 <script type="text/javascript">
15 $(document).ready(function(){
16 $imageShow=$('#imageShow');
17 $images=$('#imageSrc li',$imageShow);
18 $imageSwitches=$('#imageSwitch li',$imageShow);
19 if($images.size()>0){
20 init();
21 var timer=setInterval(autoSwitch,1000);
22 $imageSwitches.each(function(index,item){
23 $(item).click(function(){
24 clearInterval(timer);
25 setTimeout(function(){timer=setInterval(autoSwitch,1000)},1000);
26 $imageSwitches.css('background-color','').eq(index).css('background-color','#E22E51');
27 if(index!=$imageShow.data('show')){
28 $imageShow.data('show',index);
29 $images.hide().eq(index).fadeIn('slow');
30 }
31 });
32 });
33 }
34 function autoSwitch(){
35 $nowIndex=$imageShow.data('show')+1;
36 if($images.size()>$nowIndex){
37 $imageSwitches.css('background-color','').eq($nowIndex).css('background-color','#E22E51');
38 $imageShow.data('show',$nowIndex);
39 $images.hide().eq($nowIndex).fadeIn('slow');
40 }else{
41 init();
42 }
43 }
44 function init(){
45 $imageShow.data('show',0);
46 $images.hide().eq(0).fadeIn('slow');
47 $imageSwitches.css('background-color','').eq(0).css('background-color','#E22E51');
48 }
49 });
50 </script>
51 </head>
52 <body>
53 <div id="imageShow">
54 <ul id="imageSrc">
55 <li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_1.gif"></li>
56 <li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_2.gif"></li>
57 <li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_3.gif"></li>
58 <li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_4.gif"></li>
59 <li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_5.gif"></li>
60 </ul>
61 <ul id="imageSwitch">
62 <li>1</li>
63 <li>2</li>
64 <li>3</li>
65 <li>4</li>
66 <li>5</li>
67 </ul>
68 </div>
69 </body>
70 </html>
posted on 2010-05-18 10:37 kingQueenyun 阅读(1176) 评论(0) 编辑 收藏 举报
