所属分类:网页特效-焦点图/幻灯片,触屏/拖拽/下拉
/* container */
.container{width:620px;height:164px;margin:20px auto;overflow:hidden;position:relative;}
.container ul{width:10000px;position:absolute;left:0px;top:0px;padding:0;margin:0;}
.container ul li{width:158px;padding:0 10px;float:left;text-align:center;}
.container ul li p{height:40px;line-height:20px;overflow:hidden;}
.container ul li img{border:1px solid #ddd;padding:3px;}
.container ul li div.current img{border:solid 1px #ff6600;padding:3px;}
/* hScrollPane */
.hScrollPane_dragbar,.hScrollPane_draghandle,.hScrollPane_leftarrow,.hScrollPane_rightarrow{background:url(images/dragbar.gif);}
.hScrollPane_dragbar{position:absolute;left:0px;bottom:0px;height:16px;margin:0 auto;background-position:left -32px;}
.hScrollPane_draghandle{height:14px;width:30px;border:1px solid #d5d3d3;overflow:hidden;position:absolute;top:0px;left:0px;cursor:default;background-position:center -48px;background-repeat:no-repeat;background-color:#e5e5e5;-moz-border-radius:2px;-khtml-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.hScrollPane_leftarrow,.hScrollPane_rightarrow{display:inline-block;height:16px;width:17px;overflow:hidden;position:absolute;bottom:0;}
.hScrollPane_leftarrow{left:0;}
.hScrollPane_leftarrow:hover{background-position:left -64px;}
.hScrollPane_rightarrow{right:0;background-position:left -16px;}
.hScrollPane_rightarrow:hover{background-position:left -80px;}
.draghandlealter{background-position:center -96px;background-color:#efefef;}
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/hScrollPane.js"></script>
$(".container").hScrollPane({
mover:"ul",
moverW:function(){return $(".container li").length*178;}(),
showArrow:true,
handleCssAlter:"draghandlealter",
mousewheel:{moveLength:207}
});
$(function(){
var img=new Image();
var imgshowobj=$(".imgshow");
var imgzoom=imgshowobj.find(".imgzoom");
imgshowobj.find(".thumblist").find("div a").live("click",function(){
imgzoom.find(".loading").show();
img.onload=function(){
imgzoom.find("img").attr("src",img.src);
imgzoom.find(".loading").hide();
}
img.src=$(this).attr("href");
$(".thumblist li div a").parent().removeClass("current");
$(this).parent().addClass("current");
return false;
});
});
<div class="imgshow">
<div class="imgzoom">
<img src="images/1.jpg" alt="" />
<div class="loading"></div>
</div>
<div class="container thumblist">
<ul>
<li>
<div class="current"><a href="images/1.jpg"><img src="images/s1.jpg" alt="" /></a></div>
<p><a href="http://www.sucainiu.com/" target="_blank">jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单</a></p>
</li>
<li>
<div><a href="images/2.jpg"><img src="images/s2.jpg" alt="" /></a></div>
<p><a href="http://www.sucainiu.com/" target="_blank">jquery 表单美化 input文本框模拟select选择框获取选定的value值</a></p>
</li>
<li>
<div><a href="images/3.jpg"><img src="images/s3.jpg" alt="" /></a></div>
<p><a href="http://www.sucainiu.com/" target="_blank">jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动</a></p>
</li>
<li>
<div><a href="images/4.jpg"><img src="images/s4.jpg" alt="" /></a></div>
<p><a href="http://www.sucainiu.com/" target="_blank">jquery smartFloat插件制作仿淘宝产品列表页默认排序搜索框</a></p>
</li>
<li>
<div><a href="images/5.jpg"><img src="images/s5.jpg" alt="" /></a></div>
<p><a href="http://www.sucainiu.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a></p>
</li>
<li>
<div><a href="images/6.jpg"><img src="images/s6.jpg" alt="" /></a></div>
<p><a href="http://www.sucainiu.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a></p>
</li>
<li>
<div><a href="images/7.jpg"><img src="images/s7.jpg" alt="" /></a></div>
<p><a href="http://www.sucainiu.com/" target="_blank">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示</a></p>
</li>
<li>
<div><a href="images/8.jpg"><img src="images/s8.jpg" alt="" /></a></div>
<p><a href="http://www.sucainiu.com/" target="_blank">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></p>
</li>
</ul>
</div>
</div><!--imgshow end-->