jQuery Slideshow.js 插件

Slides.js 是一个用于 jQuery 的响应式幻灯片插件，具有触摸和 CSS3 过渡等功能。它有助于轻松实现幻灯片放映以及在设备上流畅运行的动画。

其特点如下：

• 响应式：您可以创建响应式幻灯片。
• 触摸：您可以在幻灯片中添加触摸动作。
• CSS3 过渡：您可以添加在幻灯片中完美运行的动画。

要使用这个插件，只需在 body 标签上方添加 CDN 链接：

例子：

HTML

  

    
    SlidesJS Example
    
    
    
    
  
    
    
    
  

    
        #slides {
            display: none
        }
          
        #slides .slidesjs-navigation {
            margin-top: 3px;
        }
          
        #slides .slidesjs-previous {
            margin-right: 5px;
            float: left;
        }
          
        #slides .slidesjs-next {
            margin-right: 5px;
            float: left;
        }
          
        .slidesjs-pagination {
            margin: 6px 0 0;
            float: right;
            list-style: none;
        }
          
        .slidesjs-pagination li {
            float: left;
            margin: 0 1px;
        }
          
        .slidesjs-pagination li a {
            display: block;
            width: 13px;
            height: 0;
            padding-top: 13px;
            background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20201213110552/logo.png);
            background-position: 0 0;
            float: left;
            overflow: hidden;
        }
          
        .slidesjs-pagination li a.active,
        .slidesjs-pagination li a:hover.active {
            background-position: 0 -13px
        }
          
        .slidesjs-pagination li a:hover {
            background-position: 0 -26px
        }
          
        #slides a:link,
        #slides a:visited {
            color: #333
        }
          
        #slides a:hover,
        #slides a:active {
            color: #9e2020
        }
          
        .navbar {
            overflow: hidden
        }
    
  
    
    
        #slides {
            display: none
        }
          
        .container {
            margin: 0 auto
        }
        /* For tablets & smart phones */
          
        @media (max-width: 767px) {
            body {
                padding-left: 20px;
                padding-right: 20px;
            }
            .container {
                width: auto
            }
        }
        /* For smartphones */
          
        @media (max-width: 480px) {
            .container {
                width: auto
            }
        }
        /* For smaller displays like laptops */
          
        @media (min-width: 768px) and (max-width: 979px) {
            .container {
                width: 724px
            }
        }
        /* For larger displays */
          
        @media (min-width: 1200px) {
            .container {
                width: 1170px
            }
        }
    
    

  

  
    
    
    
        
            
            
            
            
                
            
                
        
    
    
  
    
    
      
    
  
    
    
    
    
  
    
    
        $(function() {
            $('#slides').slidesjs({
                width: 940,
                height: 528,
                navigation: false
            });
        });
    
    

  

输出：