修改自：http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption
soure:
/Files/ptfree/slideshow.zip
Html
1 <html>
2 <head>
3 <script src="js/jquery-1.3.1.min.js" type="text/javascript" >
4 </script>
5 <script src="js/SlideShow.js" type="text/javascript" >
6 </script>
7 <style type="text/css">
8
9 .sliderContainer {
10 position:relative;
11 height:360px
12 }
13 .sliderContainer a {
14 float:left;
15 position:absolute;
16 }
17
18 .sliderContainer a img {
19 border:none;
20 }
21
22 .sliderContainer a.show {
23 z-index:500
24 }
25
26 .sliderContainer .caption {
27 z-index:600;
28 background-color:#000;
29 color:#ffffff;
30 height:30px;
31 position:absolute;
32 bottom:0;
33 }
34
35 .sliderContainer .caption ul {
36 margin:5px;
37 list-style:none;
38 }
39
40 .sliderContainer .caption li {
41 margin:0;
42 padding:4;
43 color:#1DCCEF;
44 display:inline;
45 }
46
47 </style>
48 <script type="text/javascript" >
49 $(document).ready(slideShow);
50 </script>
51 </head>
52
53 <body>
54 <div class="sliderContainer">
55 <div class="slider">
56 <a href="#" class="show">
57 <img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" />
58 </a>
59 <div style='float:right'>
60 <p>Text in slider 1.</p>
61
62 </div>
63 </div>
64 <div class="slider">
65 <a href="#">
66 <img src="images/grass-blades.jpg" alt="Grass Blades" width="580" height="360" title="" />
67 </a>
68 </div>
69 <div class="slider">
70 <a href="#">
71 <img src="images/ladybug.jpg" alt="Ladybug" width="580" height="360" title="" />
72
73 </a>
74 </div>
75 <div class="slider">
76 <a href="#">
77 <img src="images/lightning.jpg" alt="Lightning" width="580" height="360" title="" />
78 </a>
79 </div>
80 <div class="slider">
81 <a href="#">
82
83 <img src="images/lotus.jpg" alt="Lotus" width="580" height="360" title="" />
84 </a></div>
85
86 <div class="slider">
87 <a href="#">
88 <img src="images/mojave.jpg" alt="Mojave" width="580" height="360" title="" />
89 </a></div>
90
91 <div class="slider">
92 <a href="#">
93
94 <img src="images/pier.jpg" alt="Pier" width="580" height="360" title="" />
95 </a></div>
96
97 <div class="slider">
98 <a href="#">
99 <img src="images/sea-mist.jpg" alt="Sea Mist" width="580" height="360" title="" />
100 </a></div>
101
102 <div class="slider">
103 <a href="#">
104
105 <img src="images/stones.jpg" alt="Stone" width="580" height="360" title="" />
106 </a></div>
107
108 </div>
109
110 </body>
111 </html>
112
Code
1 function slideShow()
2 {
3 var container = $('.sliderContainer');
4
5 container.each(function(){
6 var sliders = $(this).find('.slider')
7 caption = '',
8 current = -1,
9 timer = -1,
10 go = function(index)
11 {
12 if(current != -1)
13 {
14 caption.find('li').eq(current).css('color', '#1DCCEF');
15 sliders.eq(current).css({opacity: 0.0});
16 }
17 if(typeof index !== 'undefined' && index)
18 current = index - 1;
19 else
20 current = (current + 1) % sliders.length;
21 caption.find('li').eq(current).css('color', 'red');
22 sliders.eq(current).css({opacity: 1.0});
23
24 if(timer == -1)
25 timer = setInterval(go, 6000);
26 };
27
28 caption += '<div class="caption"><ul>';
29 for(i = 0; i < sliders.length; )
30 caption += '<li>' + ++i + '</li>';
31 caption += '</ul></div>';
32 $(this).append(caption);
33 caption = $('.sliderContainer .caption');
34 caption.find('li').mouseover(function(){
35 clearInterval(timer);
36 timer = -1;
37 go(+($(this).text()));
38 });
39
40 sliders.css({opacity: 0.0});
41 caption.css({width: sliders.find('img').attr('width'), opacity: 0.7});
42 go();
43 });
44 }
45
