#chopslider #demo示例:

html:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/chopslider.js"></script>
<script src="js/demo.js"></script>

css: html,body { background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0; padding: 0; position: relative; height: 100%; width: 100%; line-height: 1.4em; color: #444; } .cs3 { width: 600px; height: 300px; position: absolute; z-index: 10; margin: auto; right: 0; bottom: 0; left: 0; top: 0; } .cs3-slide-prev { background: url(skins/wood-nav.png) no-repeat left top; width: 20px; height: 33px; position: absolute; z-index: 11; left: 10px; top: 140px; } .cs3-slide-next { background: url(skins/wood-nav.png) no-repeat left bottom; width: 20px; height: 33px; position: absolute; z-index: 11; right: 10px; top: 140px; } .cs3-pagination { position: absolute; text-align: center; bottom: 20px; left: 50%; margin-left: -50px; background-color: rgba(255,255,255,0.4); } .cs3-pagination-switch { width: 10px; height: 10px; background: url(skins/whitepane-pag.png) no-repeat left top; display: inline-block; margin: 0 5px; } .cs3-active-switch { background: url(skins/whitepane-pag.png) no-repeat left bottom; }

js: $(function() { var g = $(".cs3").html(), e = { effects: "tiles3d", autoplay: { enabled: !0, delay: 2E3 }, navigation: { enabled: !0, next: ".cs3-slide-next", prev: ".cs3-slide-prev" }, pagination: { enabled: !0, container: ".cs3-pagination" } }; $(".cs3").cs3(e); });