BoxSlider – jQuery内容滚动/滑动插件
简介
BoxSlider 是一款小巧的 jQuery 内容滚动/滑动插件,当鼠标悬停在箭头上,内容就会按照相应的方向滚动。你可以用于大篇幅文字(小说)或图片展示。
浏览器兼容
IE9+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
使用方法
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/jquery-boxSlider.js"></script>
2、HTML
<div class="box-slider" id="dowebok"> <a href="#" class="box-slider-seta-up"></a> <div class="box-slider-content"> <div class="box-slider-move"> <div class="item"><span></span></div> <div class="item"><span></span></div> ... <div class="item last-item"><span></span></div> </div> </div> <a href="#" class="box-slider-seta-down"></a> </div>
3、CSS
.box-slider { width: 900px; margin: 0 auto; } .box-slider .box-slider-seta-up { display: block; height: 30px; margin: 0 5px; background: url(img/seta-up.png) no-repeat center center #674172; } .box-slider .box-slider-seta-down { display: block; height: 30px; margin: 0 5px; background: url(img/seta-down.png) no-repeat center center #674172; } .box-slider .box-slider-content { height: 420px; margin: 10px 0; overflow: hidden; } .box-slider .box-slider-move { position: relative; top: 0; left: 0; } .box-slider .item { float: left; width: 33.3%; } .box-slider .item span { display: block; height: 200px; background-color: #aea8d3; margin: 5px 5px; } .box-slider .last-item span { background-color: red; text-align: center; font-family: Arial, Helvetica, sans-serif; color: #fff; } .box-slider-move { overflow: hidden; *zoom:1; }
样式可以根据自身需要任意编写,需要注意的是 .box-slider-move 一定要清除浮动。
4、JavaScript
$(function() { $('#dowebok').boxSlider({ orientation: 'vertical', }); });
配置
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
orientation(必须) | 字符串 | false | 滚动方向,可选 vertical(垂直/上下)或 horizontal(水平/左右) |
speed | 整数 | 1 | 滚动速度,越大越快 |
added | 函数 | 空 | 初始化后的回调函数 |
标签:jQuery插件