jQuery幻灯片轮播插件Slippry 等比例响应式
演示网址：
/demo/Slippry/
HTML结构：
<!DOCTYPEhtml><html><head><title>slipprydemo</title><scriptsrc="/libs/jquery/2.1.4/jquery.min.js"></script><scriptsrc="slippry.min.js"></script><metaname="viewport"content="width=device-width"><linkrel="stylesheet"href="slippry.css"><style>body{margin:0;padding:0;font-family:source-sans-pro,Helvetica,Arial,sans-serif;font-size:14px;}.demo_wrapper{width:60%;margin:0auto;}@mediaonlyscreenand(max-device-width:800px),screenand(max-width:800px){.demo_wrapper{width:80%;}}.demo_block{width:100%;}</style></head><body><sectionclass="demo_wrapper"><articleclass="demo_block"><ulid="demo1"><li><ahref="#slide1"><imgsrc="img/image-1.jpg"alt="Thisiscaption1<ahref=#link>Evenwithlinks!</a>"></a></li><li><ahref="#slide2"><imgsrc="img/image-2.jpg"alt="Thisiscaption2"></a></li><li><ahref="#slide3"><imgsrc="img/image-4.jpg"alt="Andthisissomeverylongcaptionforslide3.Yes,reallylong."></a></li></ul><ahref="#glob"class="prev">Prev</a>/<ahref="#glob"class="next">Next</a>||<ahref="#glob"class="init">Init</a>|<ahref="#glob"class="reset">Destroy</a>|<ahref="#glob"class="reload">Reload</a>||<ahref="#glob"class="stop">Stop</a>|<ahref="#glob"class="start">Start</a></article></section><script>$(function(){vardemo1=$("#demo1").slippry({//transition:fade,//淡入淡出transition:horizontal,//左滚useCSS:true,speed:600,pause:3000,auto:true,preload:visible,autoHover:false});//暂停$(.stop).click(function(){demo1.stopAuto();});//开始$(.start).click(function(){demo1.startAuto();});//上一页$(.prev).click(function(){demo1.goToPrevSlide();returnfalse;});//下一页$(.next).click(function(){demo1.goToNextSlide();returnfalse;});//重置$(.reset).click(function(){demo1.destroySlider();returnfalse;});//重来$(.reload).click(function(){demo1.reloadSlider();returnfalse;});//最初$(.init).click(function(){demo1=$("#demo1").slippry();returnfalse;});});</script></body></html>
下载：
基于jQuery幻灯片插件Slippry.zip
