播放/暂停的 slide滑动焦点图-优快云博客

本文介绍了一种使用HTML、CSS及JavaScript实现的播放/暂停功能的滑动焦点图效果。该焦点图能够自动切换图片，并支持不同屏幕尺寸的响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

播放/暂停的 slide滑动焦点图

 
   XML/HTML Code 
  
 
   <div class="container">  
    <div id="slides">  
      <img src="../mohe.png" alt="">  
      <img src="../sanya.jpg" alt="">  
      <img src="../dalian.jpg" alt="">  
      <img src="../dandong.png" alt="">  
    </div>  
  </div>  
 
  

 
   JavaScript Code 
  
 
   <script>  
    $(function() {  
      $('#slides').slidesjs({  
        width: 600,  
        height: 328,  
        play: {  
          active: true,  
          auto: true,  
          interval: 4000,  
          swap: true  
        }  
      });  
    });  
  </script>  
 
  

 
   CSS Code 
  
 
   <style>  
    #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: 568px) and (max-width: 579px) {  
      .container {  
        width: 600px  
      }  
    }  
  
    /* For larger displays */  
    @media (min-width: 500px) {  
      .container {  
        width: 600px  
      }  
    }  
  </style>  
 
  