slideshow-jquery简单的幻灯片插件

发布于，归属于jquery插件。 沙发还空着，抢！ 共有239人围观    

jquery-photo-slider-with-semi-transparent-caption-tutorial

点此下载

很简单的一个幻灯片，可以自动播放，带有标题和文字描述，但是没有按钮借口。

简要说明下其使用方法

建立如下HTML结构

  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>

来看下其JS部分

  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.        
  60. }
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类