演示图：

特效说明：

一款jQuery横向滚动条图文相册JS网页特效，可以设置样式来实现漂亮的横向滚动条效果、抛去系统默认滚动条。滚动条滑块可以设置鼠标滑过样式、鼠标点击样式、鼠标离开样式三种状态。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

使用方法：

1、调用CSS代码：
<link rel=”stylesheet” type=”text/css” href=”css/jquery-ui-1.7.2.custom.css”>
<link rel=”stylesheet” type=”text/css” href=”css/css.css”>

2、调用JS代码：
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js”></script>
<script type=”text/javascript”>
$(function() {
var conveyor = $(“.content-conveyor”, $(“#sliderContent”)),
item = $(“.item”, $(“#sliderContent”));
conveyor.css(“width”, item.length * parseInt(item.css(“width”)));
var sliderOpts = {
max: (item.length * parseInt(item.css(“width”))) – parseInt($(“.viewer”, $(“#sliderContent”)).css(“width”)),
slide: function(e, ui) {
conveyor.css(“left”, “-” + ui.value + “px”);
}
};
$(“#slider”).slider(sliderOpts);
});
</script>

3、添加HTML代码：
加入<!–效果html开始–>……<!–效果html结束–>之间的html和js代码；放在<body></body>之间。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。