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>之间。