jquery按钮控制横向滑块图片滚动特效代码下载


jquery按钮控制横向滑块图片滚动特效代码下载
jquery按钮控制横向滑块图片滚动特效代码下载以及按钮控制、横向滑块、图片滚动等js/jquery网页特效代码下载。

1. 引入CSS

<link href="css/main.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hScrollPane.js"></script>

3. HTML代码

<div id="zsgun">
	<a href="#" class="prenext zspre"></a>
	<a href="#" class="prenext zsnext"></a>
	<div id="gundiv" class="container2">
		<ul>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<p><a href="https://www.51qianduan.com/">51前端</a></p>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<p><a href="https://www.51qianduan.com/">51前端</a></p>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<p><a href="https://www.51qianduan.com/">51前端</a></p>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<p><a href="https://www.51qianduan.com/">51前端</a></p>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<p><a href="https://www.51qianduan.com/">51前端</a></p>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<p><a href="https://www.51qianduan.com/">51前端</a></p>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<p><a href="https://www.51qianduan.com/">51前端</a></p>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<p><a href="https://www.51qianduan.com/">51前端</a></p>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<p><a href="https://www.51qianduan.com/">51前端</a></p>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<p><a href="https://www.51qianduan.com/">51前端</a></p>
			</li>
		</ul>
	</div>
</div>
<script type="text/javascript">
$(function(){
	var glen = $("#gundiv ul li").length;
	$("#gundiv ul").css("width",172 * (glen));
	$("#gundiv li").hover(function(){
		$("#gundiv li").removeClass("zslion");
		$(this).addClass("zslion");
	},function(){
		$(this).removeClass("zslion");
	})
});
$("#zsgun").hScrollPane({
	mover:"ul",
	moverW:function(){return $("#zsgun li").length*172-17;}(),
	showArrow:true,
	handleCssAlter:"draghandlealter"
});
</script>

相关推荐

发表评论

相关文章