jQuery内容滚动插件BoxSlider

来源:https://www.sucaihuo.com/js/2616.html 2017-08-01 23:56浏览(949) 收藏

一款jQuery内容滚动插件BoxSlider,共有3种滚动效果(3个演示页面),基本就是鼠标悬停在上下或左右箭头时,预设的内容(图片、文字等均可)则自动上下或左右滚动,鼠标离开在自动停止滚动,总体来说还是比较实用的,喜欢的童鞋请收下吧。
jQuery内容滚动插件BoxSlider
分类:图片代码 > 图片滚动 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需设置好页面元素的样式,代码如下:

<style type="text/css">
body { margin: 0; border-left: 200px solid #ccc;}
h1 { margin: 40px 0; font: 32px 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; text-align: center;}
.menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; background-color: #ccc;}
.menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}
.menu a:hover { background-color: #eee;}
.menu .cur { color: #000; background-color: #fff !important;}
.vad { margin: 50px 0 10px; font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; text-align:center;}
.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
.vad a:hover { color: #fff; background-color: #000;}
.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;}
.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;}
</style>

页面的body部分,分为两个部分,一个div容器放置特效菜单选项,另一个div容器则放置滚动的内容,代码如下:

<div class="menu">
	<a class="cur" href="index.html">1、垂直/竖向</a>
	<a href="index2.html">2、水平/横向</a>
	<a href="index3.html">3、回调函数</a>
</div>
<h1>垂直/竖向</h1>
<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"><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>

页面的底部,需引入jQuery库和boxSlider插件,并启用插件,代码如下:

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-boxSlider.js"></script>
<script type="text/javascript">
$(function() {
	$('#jqhtml').boxSlider({
		orientation: 'vertical',
	});
});
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2