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

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

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

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

演示

 

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>

 

 

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