#chopslider #demo示例:
html:
<title>demo chopSlider3</title> <script src="js/modernizr-2.5.3.min.js"></script><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); });
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型