jQuery内容滚动插件BoxSlider

所属分类:媒体-滑块和旋转

 26601  298  查看评论 (1)
分享到微信朋友圈
X
jQuery内容滚动插件BoxSlider ie兼容9

使用方法

引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery-boxSlider.js"></script>

HTML

<div class="box-slider" id="jqhtml">
	<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"><span></span></div>
			<div class="item"><span></span></div>
			<div class="item"><span></span></div>
			<div class="item"><span></span></div>
			<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>

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 #dedede;}
.box-slider .box-slider-seta-down { display: block; height: 30px; margin: 0 5px; background: url(img/seta-down.png) no-repeat center center #dedede;}
	.box-slider-seta-up:hover,.box-slider-seta-down:hover{background-color: #2E2E2E}
	
.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: #292929; 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 一定要清除浮动。

JavaScript

$(function() {
	$('#jqhtml').boxSlider({
		orientation: 'vertical',
	});
});

配置

属性/方法类型默认值说明
orientation(必须)字符串false滚动方向,可选 vertical(垂直/上下)或 horizontal(水平/左右)
speed整数1滚动速度,越大越快
added函数初始化后的回调函数
相关插件-滑块和旋转

jQuery轮播图点击放大

jQuery轮播图点击放大,即可点击轮播又可点击图片放大图片
  滑块和旋转
 49354  374

轮播滚动左右切换

轮播滚动左右切换
  滑块和旋转
 73841  462

价格筛选条

jQuery价格区间筛选
  滑块和旋转
 24881  335

jQuery滑块插件slider

jQuery滑块插件slider很强大
  滑块和旋转
 73188  373

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Hedy 0
    2018/7/9 16:50:46
    水平方向时,一开始已经在最右边,需要把鼠标移入左边箭头按钮,内容左滑怎么做呢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复