skitter-slider轮播 – 有爱前端

https://skitter-slider.net/options.html
http://www.jq22.com/jquery-info20

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>skitter-slider</title>  <link rel="stylesheet" href="http://img.gzui.net/plug-in/skitter.styles.css"> <style type="text/css"> .lunbo_s02 { width: 758px; height: 346px; float: left; overflow: hidden; position: relative; } .lunbo_s02 .box_skitter_large { width: 758px; height: 346px; } .lunbo_s02 .info_slide_dots{ padding-left: 25px; position: absolute; bottom: 35px; left: 40px; } </style> </head> <body> <div class="lunbo_s02"> <div class="box_skitter box_skitter_large"> <ul> <li><a href="http://www.gzui.net/" target="_blank" rel="noopener"><img class="cubeStop" src="http://img.gzui.net/wp-content/uploads/2015/05/91ef76c6a7efce1b27732cc6ad51f3deb48f6566.jpg" alt="gzui.net" /></a></li> <li><a href="http://www.gzui.net/" target="_blank" rel="noopener"><img class="horizontal" src="http://img.gzui.net/wp-content/uploads/2015/05/wallhaven-174599.jpg" alt="gzui.net" /></a></li> <li><a href="http://www.gzui.net/" target="_blank" rel="noopener"><img class="showBars" src="http://img.gzui.net/wp-content/uploads/2015/05/6c224f4a20a44623ed3bc56b9a22720e0df3d7c2.jpg" alt="gzui.net" /></a></li> <li><a href="http://www.gzui.net/" target="_blank" rel="noopener"><img class="cubeRandom" src="http://img.gzui.net/wp-content/uploads/2015/05/4.jpg" alt="gzui.net" /></a></li> </ul> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="http://img.gzui.net/plug-in/jquery.skitter.min.js"></script> <script type="text/javascript"> $(function() { $('.box_skitter').skitter({ }); }); </script> </html>

提示：你可以先修改部分代码再运行。

["cube","cubeRandom","block","cubeStop","cubeStopRandom","cubeHide","cubeSize","horizontal","showBars","showBarsRandom","tube","fade","fadeFour","paralell","blind","blindHeight","blindWidth","directionTop","directionBottom","directionRight","directionLeft","cubeSpread","glassCube","glassBlock","circles","circlesInside","circlesRotate","cubeShow","upBars","downBars","hideBars","swapBars","swapBarsBack","swapBlocks","cut"]

强大实用的jQuery幻灯片插件Owl Carousel(支持触摸事件)

转载请注明：有爱前端 » skitter-slider轮播