超炫的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