随笔-64  评论-13  文章-2  trackbacks-0
from
  http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption


1. HTML

My ultimate objective is - to keep the html as simple as possible. So, the final product is as following. The first image has a class called "show". Class show has higher z-index, so image with this class will display on top, thus image with this class will always display on top of the rest. The second thing you need to know is the DIV with "caption" class. It has the highest z-index. That DIV will be used to display the caption. The caption is retrieve from the REL attribute in the img element. You can put html element in the REL attribute. Be aware of extra padding and margin of the html elements you used. (eg h1, p).

Have a look at the html code:

  1. <div id="gallery">  
  2.   
  3.     <a href="#" class="show">  
  4.     <img src="images/flowing-rock.jpg" alt="Flowing Rock" alt="" title="" width="580" height="360" rel="<h3>Flowing Rock</h3>You can put html element   
  5.     inside the REL attribute."/></a>  
  6.     </a>  
  7.       
  8.     <a href="#">  
  9.         <img src="images/grass-blades.jpg" alt="Grass Blades" alt="" title="" width="580" height="360" rel="<h3>Grass Blades</h3>description"/>  
  10.     </a>  
  11.       
  12.     ......  
  13.     ......  
  14.     ......  
  15.   
  16.     <div class="caption"><div class="content"></div></div>  
  17. </div>  
  18. <div class="clear"></div> 

2

CSS

In this section, I declared a container #gallery for this image slide show. The CSS for this tutorial is pretty straight foward, the most importance thing is the z-index. You have to make sure the "show" class z-index is lower than the "caption" z-index.

  1. body{  
  2.     font-family:arial  
  3. }  
  4.   
  5. .clear {  
  6.     clear:both  
  7. }  
  8.   
  9. #gallery {  
  10.     position:relative;  
  11.     height:360px  
  12. }  
  13.     #gallery a {  
  14.         float:left;  
  15.         position:absolute;  
  16.     }  
  17.       
  18.     #gallery a img {  
  19.         border:none;  
  20.     }  
  21.       
  22.     #gallery a.show {  
  23.         z-index:500  
  24.     }  
  25.   
  26.     #gallery .caption {  
  27.         z-index:600;   
  28.         background-color:#000;   
  29.         color:#ffffff;   
  30.         height:100px;   
  31.         width:100%;   
  32.         position:absolute;  
  33.         bottom:0;  
  34.     }  
  35.   
  36.     #gallery .caption .content {  
  37.         margin:5px  
  38.     }  
  39.       
  40.     #gallery .caption .content h3 {  
  41.         margin:0;  
  42.         padding:0;  
  43.         color:#1DCCEF;  
  44.     }  
  45.      

3. Javascript

Finally, the Javascript code. I have added comments in each line to explain what it does. My concept for this image slide show:

  • Hide all the images
  • Display the first image and caption
  • Find the image with "show" class, and grab the next image using next() method
  • Add "show" class to next image
  • Animate the image (fadeout the current image, fadein next image)
  • And, it repeats above steps over and over again
  1. $(document).ready(function() {        
  2.       
  3.     //Execute the slideShow  
  4.     slideShow();  
  5.   
  6. });  
  7.   
  8. function slideShow() {  
  9.   
  10.     //Set the opacity of all images to 0  
  11.     $('#gallery a').css({opacity: 0.0});  
  12.       
  13.     //Get the first image and display it (set it to full opacity)  
  14.     $('#gallery a:first').css({opacity: 1.0});  
  15.       
  16.     //Set the caption background to semi-transparent  
  17.     $('#gallery .caption').css({opacity: 0.7});  
  18.   
  19.     //Resize the width of the caption according to the image width  
  20.     $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});  
  21.       
  22.     //Get the caption of the first image from REL attribute and display it  
  23.     $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))  
  24.     .animate({opacity: 0.7}, 400);  
  25.       
  26.     //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds  
  27.     setInterval('gallery()',6000);  
  28.       
  29. }  
  30.   
  31. function gallery() {  
  32.       
  33.     //if no IMGs have the show class, grab the first image  
  34.     var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));  
  35.   
  36.     //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
  37.     var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));     
  38.       
  39.     //Get next image caption  
  40.     var caption = next.find('img').attr('rel');   
  41.       
  42.     //Set the fade in effect for the next image, show class has higher z-index  
  43.     next.css({opacity: 0.0})  
  44.     .addClass('show')  
  45.     .animate({opacity: 1.0}, 1000);  
  46.   
  47.     //Hide the current image  
  48.     current.animate({opacity: 0.0}, 1000)  
  49.     .removeClass('show');  
  50.       
  51.     //Set the opacity to 0 and height to 1px  
  52.     $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });   
  53.       
  54.     //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect  
  55.     $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );  
  56.       
  57.     //Display the content  
  58.     $('#gallery .content').html(caption);  
  59.          


posted on 2009-08-21 10:08 桂湖山 阅读(578) 评论(0)  编辑 收藏 引用 所属分类: jsp页面技术
只有注册用户登录后才能发表评论。