一、HTML 部分
复制代码 代码示例:
<div class="drag">
<div class="drag_cont">
<ul class="drag_ul">
<li><img alt="SunMusic" src="http://img.jb200.com/images/works/sunmusic_s.jpg" /></li>
<li><img alt="WanGe" src="http://img.jb200.com/images/works/wange_s.jpg" /></li>
<li><img alt="DustMedia" src="http://img.jb200.com/images/works/dustmedia_s.jpg" /></li>
<li><img alt="BlueLaw" src="http://img.jb200.com/images/works/bluelaw_s.jpg" /></li>
<li><img alt="DarkSide" src="http://img.jb200.com/images/works/darkside_s.jpg" /></li>
<li><img alt="ChinaBlogs" src="http://img.jb200.com/images/works/chinablogs_s.jpg" /></li>
<li><img alt="OrgRisk" src="http://img.jb200.com/images/works/orgrisk_s.jpg" /></li>
<li><img alt="WOYO" src="http://img.jb200.com/images/works/woyo_s.jpg" /></li>
<li><img alt="FML" src="http://img.jb200.com/images/works/fml_s.jpg" /></li>
<li><img alt="MusicWeiWei" src="http://img.jb200.com/images/works/musicweiwei_s.jpg" /></li>
<li><img alt="YupNews" src="http://img.jb200.com/images/works/yupnews_s.jpg" /></li>
<li><img alt="xinwanbiao" src="http://img.jb200.com/images/works/xwb_s.jpg" /></li>
<li><img alt="RedLaw" src="http://img.jb200.com/images/works/redlaw_s.jpg" /></li>
<li><img alt="WJJ" src="http://img.jb200.com/images/works/wjj_s.jpg" /></li>
<li><img alt="XinTai" src="http://img.jb200.com/images/works/xintai_s.jpg" /></li>
</ul>
</div>
<div class="drag_cont_btn"></div>
</div>
二、脚本部分
首先，引入jquery。然后，引入一个jQuery UI 的组件，只需要其中的 ui.core.min.js 和 ui.slider.min.js 这两个。
在页面中依次引用以下脚本：
复制代码 代码示例:
<script type="text/
javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.min.js"></script>
<script type="text/javascript" src="js/ui.slider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $contain = $(".drag_ul", $(".drag"));
var $items = $("li", $(".drag .drag_ul"));
var $dragCont = $(".drag_cont", $(".drag"));
var $button = $(".drag_cont_btn", $(".drag"));
var width = ($items.length * parseInt($items.outerWidth(true)));
$contain.css("width", width);
var sliderOpts = {
max: width - parseInt($dragCont.css("width")),
slide: function(e, ui) {
$contain.css("left", "-" + ui.value + "px")
}
};
$button.slider(sliderOpts);
});
</script>
三、样式部分
复制代码 代码示例:
img{border:0 none;}
ul{margin:0;}
.drag{width:341px;}
.drag .drag_cont{width:323px;height:80px;position:relative;overflow:hidden;margin:10px 9px;}
.drag ul.drag_ul{height:80px;position:absolute;padding:0;}
.drag ul.drag_ul li{width:100px;height:80px;display:inline;float:left;margin:0 1px;padding:0;background:none;}
.drag ul.drag_ul li a img{width:100px;height:80px;display:block;}
.drag .drag_cont_btn{height:5px;position:relative;border:1px solid #C8C8C8;margin:0 10px 10px;}
.ui-slider .ui-slider-handle{width:20px;height:20px;cursor:pointer;overflow:hidden;background:url(images/drag_btn.gif) no-repeat;position:absolute;top:-8px;margin-left:-10px;}
