基于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