微信扫一下,即可关注我们!

先看个栗子?




塔塔,这就是 hhScroll 。

请相信你见到它的第一感觉,我们倾注了很多时间打磨这些界面:边框、圆角、阴影、切换控制器、切换指示器,如果你喜欢这些精致贴心的细节,那么接下来它会给你更多惊喜,如果你不喜欢,(...)。

HTML

Step 1:下载好 hhScrroll 之后,你会在 build 文件夹中看到插件所需的所有文件(图片、样式表、JS),需要提示的是,这些图片必须放在你网站目录的 image 文件夹下,若没有,请新建。

Step 2:新建一个页面,然后导入 jQuery、hhScroll 样式表与 JS,然后建立指定格式的 HTML 标签,并且添加一个有意义的 class 或者 id,方便获取。

<html>

<head>

<meta charset="utf-8">

<title>hhScroll demo</title>

<link rel="stylesheet" href="style/hhScroll-x.x.x.css">

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

<script src="script/hhScroll-x.x.x.js"></script>

</head>

<body>

<div class="gallery">

<div><a href="javascript:;"><img src="image/slide01.jpg" /></a></div>

<div><a href="javascript:;"><img src="image/slide02.jpg" /></a></div>

<div><a href="javascript:;"><img src="image/slide03.jpg" /></a></div>

<div><a href="javascript:;"><img src="image/slide04.jpg" /></a></div>

<div><a href="javascript:;"><img src="image/slide05.jpg" /></a></div>

</div>

</body>

</html>

javascript

最后一步,只需要一行 JS 代码,你会爱上这个插件(默认尺寸:900 x 400 像素)。

$(".gallery").hhscroll();// 一行代码

最终代码

<html>

<head>

<meta charset="utf-8">

<title>hhScroll demo</title>

<link rel="stylesheet" href="style/hhScroll-x.x.x.css">

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

<script src="script/hhScroll-x.x.x.js"></script>

<script>

$(document).ready(function(){

$(".gallery").hhscroll();// 一行代码

});

</script>

</head>

<body>

<div class="gallery">

<div><a href="javascript:;"><img src="image/slide01.jpg" /></a></div>

<div><a href="javascript:;"><img src="image/slide02.jpg" /></a></div>

<div><a href="javascript:;"><img src="image/slide03.jpg" /></a></div>

<div><a href="javascript:;"><img src="image/slide04.jpg" /></a></div>

<div><a href="javascript:;"><img src="image/slide05.jpg" /></a></div>

</div>

</body>

</html>


OK,现在你已经入门了,你可以继续学习