• jQuery 视频教程

jQuery - Slideshow.js

Slideshow.js 是一个 jQuery 插件，可快速轻松地在您的网站中实现图像或视频的幻灯片放映。

一个简单的幻灯片示例，如下所示 -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "https://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
   
   <head>
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8" />
		
      <link rel = "stylesheet" href = "css/supersized.css" type = "text/css" 
         media = "screen" />
      
      <link rel = "stylesheet" href = "theme/supersized.shutter.css" 
         type = "text/css" media = "screen" />
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
         </script>
      <script type = "text/javascript" src =" js/jquery.easing.min.js"></script>
		
      <script type = "text/javascript" src =" js/supersized.3.2.7.min.js"></script>
      <script type = "text/javascript" src = "theme/supersized.shutter.min.js"></script>
		
      <script type = "text/javascript">
         jQuery(function($){
            $.supersized({
               slideshow         :  1,			
               autoplay          :  1,			
               start_slide       :  1,			
               stop_loop         :  0,			
               random            :  0,			
               slide_interval    :  3000,		
               transition        :  6, 			
               transition_speed  :  1000,		
               new_window        :  1,			
               pause_hover       :  0,			
               keyboard_nav      :  1,			
               performance       :  1,			
               image_protect     :  1,			
                                                
               min_width         :  0,			
               min_height        :  0,			
               vertical_center   :  1,			
               horizontal_center :  1,			
               fit_always        :  0,			
               fit_portrait      :  1,			
               fit_landscape     :  0,			
               
               slide_links       :  'blank',	
               thumb_links       :  1,			
               thumbnail_navigation    :   0,			
               slides            :  	
               [			
                  {
                     image : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', 
                        title : 'Sample demo', 
                        thumb : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', 
                        url : 'https://www.tutorialspoint.com'
                  },
                  {
                     image : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', 
                        title : 'Sample demo', 
                        thumb : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', 
                        url : 'https://www.tutorialspoint.com'
                  },
                  {
                     image : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', 
                        title : 'Sample demo', 
                        thumb : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', 
                        url : 'https://www.tutorialspoint.com'
                  },
                  {
                     image : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', 
                        title : 'Sample demo', 
                        thumb : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', 
                        url : 'https://www.tutorialspoint.com'
                  },
                  {
                     image : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', 
                        title : 'Sample demo', 
                        thumb : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', 
                        url : 'https://www.tutorialspoint.com'},
               ],
               progress_bar      :	1,			
               mouse_scrub       :	0
            });
         });
      </script>
   </head>
	
   <style type = "text/css">
      ul#demo-block{ margin:0 15px 15px 15px; }
      ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; 
         float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); 
         font:11px Helvetica, Arial, sans-serif; }
      ul#demo-block li a{ color:#eee; font-weight:bold; }
   </style>

   <body>
      <div id = "prevthumb"></div>
      <div id = "nextthumb"></div>
      
      <a id = "prevslide" class = "load-item"></a>
      <a id = "nextslide" class = "load-item"></a>
      
      <div id = "thumb-tray" class = "load-item">
         <div id = "thumb-back"></div>
         <div id = "thumb-forward"></div>
      </div>
      
      <div id = "progress-back" class = "load-item">
         <div id = "progress-bar"></div>
      </div>
      
      <div id = "controls-wrapper" class = "load-item">
         <div id = "controls">
            <a id = "play-button"><img id = "pauseplay" src = "img/pause.png"/></a>

            <div id = "slidecounter">
               <span class = "slidenumber"></span> / <span class = "totalslides"></span>
            </div>

            <div id = "slidecaption"></div>

            <a id = "tray-button"><img id = "tray-arrow" src = "img/button-tray-up.png"/></a>

            <ul id = "slide-list"></ul>
         </div>
      </div>
   </body>
</html>

这应该产生以下结果 -

点击这里