首页>>焦点图>>Sequence.js实现的图片动画切换效果(2016-03-16)

Sequence.js实现的图片动画切换效果

Sequence.js实现的图片动画切换效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="sequence-theme">  
  2.             <div id="sequence">  
  3.                 <img class="sequence-prev" src="images/bt-prev.png" alt="Previous Frame" />  
  4.                 <img class="sequence-next" src="images/bt-next.png" alt="Next Frame" />  
  5.                 <ul class="sequence-canvas">  
  6.                     <li class="animate-in">  
  7.                         <h2 class="title">Built using Sequence.js</h2>  
  8.                         <h3 class="subtitle">The Responsive Slider with Advanced CSS3 Transitions</h3>  
  9.                         <img class="model" src="images/model1.png" alt="Model 1" />  
  10.                     </li>  
  11.                     <li>  
  12.                         <h2 class="title">Creative Control</h2>  
  13.                         <h3 class="subtitle">Create unique sliders using CSS3 transitions</h3>  
  14.                         <img class="model" src="images/model2.png" alt="Model 2" />  
  15.                     </li>  
  16.                     <li>  
  17.                         <h2 class="title">Cutting Edge</h2>  
  18.                         <h3 class="subtitle">Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</h3>  
  19.                         <img class="model" src="images/model3.png" alt="Model 3" />  
  20.                     </li>  
  21.                 </ul>  
  22.   
  23.                 <ul class="sequence-pagination">  
  24.                     <li><img src="images/tn-model1.png" alt="Model 1" /></li>  
  25.                     <li><img src="images/tn-model2.png" alt="Model 2" /></li>  
  26.                     <li><img src="images/tn-model3.png" alt="Model 3" /></li>  
  27.                 </ul>  
  28.             </div>  
  29.         </div>  

 


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