超炫的3D效果的焦点广告
包括一个自动播放与一个手动播放
图片上面的文字是文本,并不是图片,连接也是随时可以更改的
![超炫的3D效果的焦点广告 超炫的3D效果的焦点广告](https://i-blog.csdnimg.cn/blog_migrate/13e8cfcdd9c8b10706e253d2f5af292a.jpeg)
XML/HTML Code
- <section id="jms-slideshow" class="jms-slideshow">
- <div class="step" data-color="color-2">
- <div class="jms-content">
- <h3>Just when I thought...</h3>
- <p>From fairest creatures we desire increase, that thereby beauty's rose might never die</p>
- <a class="jms-link" href="#">Read more</a>
- </div>
- <img src="images/1.png" />
- </div>
- <div class="step" data-color="color-3" data-y="900" data-rotate-x="80">
- <div class="jms-content">
- <h3>Holy cannoli!</h3>
- <p>But as the riper should by time decease, his tender heir might bear his memory</p>
- <a class="jms-link" href="#">Read more</a>
- </div>
- <img src="images/2.png" />
- </div>
- <div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">
- <div class="jms-content">
- <h3>No time to waste</h3>
- <p>Within thine own bud buriest thy content and, tender churl, makest waste in niggarding</p>
- <a class="jms-link" href="#">Read more</a>
- </div>
- <img src="images/3.png" />
- </div>
- <div class="step" data-color="color-5" data-x="3000">
- <div class="jms-content">
- <h3>Supercool!</h3>
- <p>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</p>
- <a class="jms-link" href="#">Read more</a>
- </div>
- <img src="images/4.png" />
- </div>
- <div class="step" data-color="color-1" data-x="4500" data-z="1000" data-rotate-y="45">
- <div class="jms-content">
- <h3>Did you know that...</h3>
- <p>Thou that art now the world's fresh ornament and only herald to the gaudy spring</p>
- <a class="jms-link" href="#">Read more</a>
- </div>
- <img src="images/5.png" />
- </div>
- </section>
JavaScript Code
- <script type="text/javascript">
- $(function() {
- var jmpressOpts = {
- animation : { transitionDuration : '0.8s' }
- };
- $( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
- autoplay : true,
- bgColorSpeed: '0.8s',
- arrows : false
- }));
- });
- </script>