首页>>焦点图>>原生js带剪切动画的响应式幻灯片(2019-05-31)

原生js带剪切动画的响应式幻灯片

原生js带剪切动画的响应式幻灯片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="slider " data-state="0">  
  2.     <svg id="prev" viewBox='0 0 100 100'>  
  3.         <circle cx="50" cy="50" r="85" />  
  4.         <path d="M 65,2 17,50 65,98" />  
  5.     </svg>  
  6.     <svg id="next" viewBox='0 0 100 100'>  
  7.         <circle cx="50" cy="50" r="85" />  
  8.         <path d="M 35,2 82,50 35,98" />  
  9.     </svg>  
  10.   
  11.     <div class="status">  
  12.         <div class="stat" data-key="0"></div>  
  13.         <div class="stat" data-key="1"></div>  
  14.         <div class="stat" data-key="2"></div>  
  15.         <div class="stat" data-key="3"></div>  
  16.         <div class="stat" data-key="4"></div>  
  17.         <div class="stat" data-key="5"></div>  
  18.     </div>  
  19.     <div class="image" data-key="0">  
  20.         <img src="images/1.jpeg" alt="">  
  21.     </div>  
  22.     <div class="image" data-key="1">  
  23.         <img src="images/2.jpeg" alt="">  
  24.     </div>  
  25.     <div class="image" data-key="2">  
  26.         <img src="images/3.jpeg" alt="">  
  27.     </div>  
  28.     <div class="image" data-key="3">  
  29.         <img src="images/4.jpeg" alt="">  
  30.     </div>  
  31.     <div class="image" data-key="4" data-active>  
  32.         <img src="images/5.jpeg" alt="">  
  33.     </div>  
  34.     <div class="image" data-key="5">  
  35.         <img src="images/6.jpeg" alt="">  
  36.     </div>  
  37. </div>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_786.html