基于html5+css3特效可配制图片幻灯片切换代码

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

基于html5+CSS3图片幻灯片切换代码。这是一款基于jquery+html5+css3实现37种不同切换效果的幻灯片特效。效果图如下:

在线预览 源码下载

实现的代码。

html代码:

<divclass="container"><headerclass="codrops-header"><navclass="codrops-demos"><aclass="current-demo"href="index.html">Small Component</a><ahref="index2.html">Full Width</a><ahref="index3.html">Transparent</a></nav></header><section><divclass="custom-select"><selectid="fxselect"name="fxselect"><optionvalue="-1"selected>选择一种效果...</option><optionvalue="fxCorner">Corner scale</option><optionvalue="fxVScale">Vertical scale</option><optionvalue="fxFall">Fall</option><optionvalue="fxFPulse">Forward pulse</option><optionvalue="fxRPulse">Rotate pulse</option><optionvalue="fxHearbeat">Hearbeat</option><optionvalue="fxCoverflow">Coverflow</option><optionvalue="fxRotateSoftly">Rotate me softly</option><optionvalue="fxDeal">Deal 'em</option><optionvalue="fxFerris">Ferris wheel</option><optionvalue="fxShinkansen">Shinkansen</option><optionvalue="fxSnake">Snake</option><optionvalue="fxShuffle">Shuffle</option><optionvalue="fxPhotoBrowse">Photo Browse</option><optionvalue="fxSlideBehind">Slide Behind</option><optionvalue="fxVacuum">Vacuum</option><optionvalue="fxHurl">Hurl it</option></select></div><divid="component"class="component component-small"><ulclass="itemwrap"><liclass="current"><imgsrc="img/1.jpg"alt="img01"/></li><li><imgsrc="img/2.jpg"alt="img02"/></li><li><imgsrc="img/3.jpg"alt="img03"/></li><li><imgsrc="img/4.jpg"alt="img04"/></li><li><imgsrc="img/5.jpg"alt="img05"/></li></ul><nav><aclass="PRev"href="#">Previous item</a><aclass="next"href="#">Next item</a></nav></div></section></div><!--/container--><scriptsrc="js/classie.js"></script><scriptsrc="js/main.js"></script>

via:http://www.w2bc.com/article/2015-10-20-html5-css3-focus-change

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航