首页 > 代码库 > SlidesJS的使用
SlidesJS的使用
项目中对slideshow要求要有触屏滑动换图功能，就想到了SlidesJS这个Jquery插件
例排，先把静态html写好
<div id="cm_slides"> <div class="s_item" style="background-image: url(img/1.jpg);" onclick="location=‘1.html‘"> <div class="slides_desc"> <span class="slides_desc_t">标题: </span> <br /> <span class="slides_desc_c">内容</span> </div> </div> <div class="s_item" style="background-image: url(img2.jpg);" onclick="location=‘2.html‘"> <div class="slides_desc"> <span class="slides_desc_t">标题: </span> <br /> <span class="slides_desc_c">内容</span> </div> </div> <div class="s_item" style="background-image: url(img/c1.jpg);" onclick="location=‘3.html‘"> <div class="slides_desc"> <span class="slides_desc_t">标题: </span> <br /> <span class="slides_desc_c">内容</span> </div> </div> <div class="s_item" style="background-image: url(img/4.jpg);" onclick="location=‘4.html‘"> <div class="slides_desc"> <span class="slides_desc_t">标题: </span> <br /> <span class="slides_desc_c">内容</span> </div> </div> <div class="s_item" style="background-image: url(img/5.jpg);" onclick="location=‘5.html‘"> <div class="slides_desc"> <span class="slides_desc_t">标题: </span> <br /> <span class="slides_desc_c">内容</span> </div> </div> <div class="s_item" style="background-image: url(img/c1.jpg);" onclick="location=‘6.html‘"> <div class="slides_desc"> <span class="slides_desc_t">标题: </span> <br /> <span class="slides_desc_c">内容</span> </div> </div></div>
定义好CSS
#cm_slides { display: none; position: relative; } .slidesjs-navigation { display: none; margin-top: 5px; } #cm_slides .slidesjs-pagination { margin: 7px 0 0; float: right; list-style: none; position: absolute; bottom: 15px; right: 15px; z-index: 11; } #cm_slides .slidesjs-pagination li { float: left; margin: 0 5px; } #cm_slides .slidesjs-pagination li a { display: block; width: 12px; height: 0; padding-top: 13px; background-image: url(img/pagination.png); background-position: 0 -13px; float: left; overflow: hidden; } #cm_slides .slidesjs-pagination li a.active, #cm_slides .slidesjs-pagination li a:hover.active { background-position: 0 -26px; } /* #cm_slides .slidesjs-pagination li a:hover { background-position: 0 -13px; }*/ #cm_slides .slides_desc { color: white; position: absolute; left: 258px; top: 105px; font-family: Arial; width: 120px; } #cm_slides .s_item { background-color: blue; width: 400px; height: 202px; } #cm_slides_title { width: 400px; height: 50px; background-color: #003366; color: white; text-align: center; line-height: 50px; font-family: Arial; font-size: 15px; font-weight: bold; } #cm_slides .slides_desc_t { font-size: 18px; } #cm_slides .slides_desc_c { font-size: 16px; }
现在启动slideshow啦
，呵呵
<!-- SlidesJS Required: Link to jQuery --> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!-- End SlidesJS Required --> <!-- SlidesJS Required: Link to jquery.slides.js --> <script src="js/jquery.slides.min.js"></script> <!-- End SlidesJS Required --> <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready --> <script> $(function () { setTimeout(function () { $(‘#cm_slides‘).slidesjs({ width: 400, height: 202, play: { active: false, auto: false, interval: 4000, swap: true } }); }, 3000); }); </script>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。