超炫的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?
超炫的3D效果的焦点广告
原文：http://freejs.iteye.com/blog/2155286
