首页>>焦点图>>超炫的3D效果的焦点广告(2014-04-19)

超炫的3D效果的焦点广告

 包括一个自动播放与一个手动播放

图片上面的文字是文本，并不是图片，连接也是随时可以更改的

超炫的3D效果的焦点广告
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <section id="jms-slideshow" class="jms-slideshow">  
  2.                 <div class="step" data-color="color-2">  
  3.                     <div class="jms-content">  
  4.                         <h3>Just when I thought...</h3>  
  5.                     <p>From fairest creatures we desire increase, that thereby beauty's rose might never die</p>  
  6.                         <a class="jms-link" href="#">Read more</a>  
  7.                     </div>  
  8.                     <img src="images/1.png" />  
  9.                 </div>  
  10.                 <div class="step" data-color="color-3" data-y="900" data-rotate-x="80">  
  11.                     <div class="jms-content">  
  12.                         <h3>Holy cannoli!</h3>  
  13.                     <p>But as the riper should by time decease, his tender heir might bear his memory</p>  
  14.                         <a class="jms-link" href="#">Read more</a>  
  15.                     </div>  
  16.                     <img src="images/2.png" />  
  17.                 </div>  
  18.                 <div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">  
  19.                     <div class="jms-content">  
  20.                         <h3>No time to waste</h3>  
  21.                     <p>Within thine own bud buriest thy content and, tender churl, makest waste in niggarding</p>  
  22.                         <a class="jms-link" href="#">Read more</a>  
  23.                     </div>  
  24.                     <img src="images/3.png" />  
  25.                 </div>  
  26.                 <div class="step" data-color="color-5" data-x="3000">  
  27.                     <div class="jms-content">  
  28.                         <h3>Supercool!</h3>  
  29.                     <p>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</p>  
  30.                         <a class="jms-link" href="#">Read more</a>  
  31.                     </div>  
  32.                     <img src="images/4.png" />  
  33.                 </div>  
  34.                 <div class="step" data-color="color-1" data-x="4500" data-z="1000" data-rotate-y="45">  
  35.                     <div class="jms-content">  
  36.                         <h3>Did you know that...</h3>  
  37.                     <p>Thou that art now the world's fresh ornament and only herald to the gaudy spring</p>  
  38.                         <a class="jms-link" href="#">Read more</a>  
  39.                     </div>  
  40.                     <img src="images/5.png" />  
  41.                 </div>  
  42.             </section>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             $(function() {  
  3.                   
  4.                 var jmpressOpts = {  
  5.                     animation       : { transitionDuration : '0.8s' }  
  6.                 };  
  7.                   
  8.                 $( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {  
  9.                     autoplay    : true,  
  10.                     bgColorSpeed: '0.8s',  
  11.                     arrows      : false  
  12.                 }));  
  13.                   
  14.             });  
  15.         </script>  

 


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