使用jquery制作自动切换的滑动幻灯片

发布于，归属于jquery教程。 前2个座位已被强势霸占！ 共有1,015人围观    

上周连续发了二个我自己写的幻灯片组件，这次发个queness写的简单的幻灯片，通俗易懂。
slideshow2

制作教程：

创建如下html结构：

  1. <ul class="slideshow">
  2.     <li class="show"><a href="#"><img src="images/s1.gif" width="450" height="200" title="Slide 1" alt="Short Description"/></a></li>
  3.     <li><a href="#"><img src="images/s2.gif" width="450" height="200" title="Slide 2" alt="Short Description"/></a></li>
  4.     <li><a href="#"><img src="images/s3.gif" width="450" height="200" title="Slide 3" alt="Short Description"/></a></li>
  5. </ul>

css样式如下：

  1. body {
  2.     font-family:arial;   
  3.     font-size:12px;
  4. }
  5.  
  6. ul.slideshow {
  7.     list-style:none;
  8.     width:450px;
  9.     height:200px;
  10.     overflow:hidden;
  11.     position:relative;
  12.     margin:0;
  13.     padding:0;
  14.    
  15. }   
  16.  
  17. ul.slideshow li {
  18.     position:absolute;
  19.     left:0;
  20.     right:0;
  21. }
  22.  
  23. ul img {
  24.     border:none;   
  25. }
  26.  
  27. #slideshow-caption {
  28.     width:450px;
  29.     height:70px;
  30.     position:absolute;
  31.     bottom:0;
  32.     left:0;   
  33.     color:#fff;
  34.     background:#000;
  35.     z-index:500;
  36. }
  37.  
  38. #slideshow-caption .slideshow-caption-container {
  39.     padding:5px 10px;       
  40. }
  41.  
  42. #slideshow-caption h3 {
  43.     margin:0;
  44.     padding:0;   
  45.     font-size:14px;
  46. }
  47.  
  48. #slideshow-caption p {
  49.     margin:5px 0 0 0;
  50.     padding:0;
  51. }

javascript部分如下：

  1. $(document).ready(function() {       
  2.    
  3.     //调用幻灯片函数，2000为图片切换时间
  4.     slideShow(2000);
  5.  
  6. });
  7.  
  8. function slideShow(speed) {
  9.  
  10.  
  11.  
  12.     $('ul.slideshow').append('');
  13.  
  14.     //设置图片层透明度
  15.     $('ul.slideshow li').css({opacity: 0.0});
  16.    
  17.     //显示第一张图片
  18.     $('ul.slideshow li:first').css({opacity: 1.0});
  19.    
  20.     //获取第一张图片的标题和描述
  21.     $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
  22.     $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
  23.        
  24.  
  25.     $('#slideshow-caption').css({opacity: 0.7, bottom:0});
  26.    
  27.     //定时执行gallery函数
  28.     var timer = setInterval('gallery()',speed);
  29.    
  30.     //当鼠标经过时，移除定时器
  31.     $('ul.slideshow').hover(
  32.         function () {
  33.             clearInterval(timer);   
  34.         },    
  35.         function () {
  36.             timer = setInterval('gallery()',speed);           
  37.         }
  38.     );
  39.    
  40. }
  41.  
  42. function gallery() {
  43.  
  44.  
  45.     //如果没有找到.show对象，显示第一张图片
  46.     var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
  47.  
  48.     //获取下一张图片
  49.     var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
  50.        
  51.     //得到下一张图片层的标题和描述
  52.     var title = next.find('img').attr('title');   
  53.     var desc = next.find('img').attr('alt');   
  54.        
  55.     //设置透明度和z-index
  56.     next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
  57.    
  58.  
  59.     $('#slideshow-caption').animate({bottom:-70}, 300, function () {
  60.             //显示内容
  61.             $('#slideshow-caption h3').html(title);
  62.             $('#slideshow-caption p').html(desc);               
  63.             $('#slideshow-caption').animate({bottom:0}, 500);   
  64.     });       
  65.  
  66.     //隐藏当前图片
  67.     current.animate({opacity: 0.0}, 1000).removeClass('show');
  68.  
  69. }

我已将其注释汉化了，不明白的可以给我留言。

原文：http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

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

2个座位已被强势霸占！

  1. 开心凡人

    09年即将离去,祝新年快乐，呵呵

    明河共影回复于 2010年01月01日 4:05

    谢谢，也祝你新年快乐

同类