hScrollPane美化滚动条插件并带焦点图切换

hScrollPane.js是一款滚动条美化插件，本文利用它制作水平拖动展示的商品图片横行排列的效果，点击缩略图或小图商品图片，显示对应的大图商品图片。

淘建站为您提供更多_图片代码_鼠标滚动_缩略图_切换，在此特别感谢您对我们的支持与厚爱！

滚动列表

<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.sucaiq.com/js/97.html" target="_blank">jQuery页面小型窗口预览</a></p>
        </li>
        <li>
            <div><a href="images/2.jpg"><img src="images/s2.jpg" alt="" /></a></div>
            <p><a href="http://www.sucaiq.com/js/98.html" target="_blank">javascript白色简洁计算器</a></p>
        </li>
        <li>
            <div><a href="images/3.jpg"><img src="images/s3.jpg" alt="" /></a></div>
            <p><a href="http://www.sucaiq.com/js/99.html" target="_blank">javascript仿qq签名</a></p>
        </li>
        <li>
            <div><a href="images/4.jpg"><img src="images/s4.jpg" alt="" /></a></div>
            <p><a href="http://www.sucaiq.com/js/100.html" target="_blank">jSignature演示手动签名</a></p>
        </li>

    </ul>
</div>

引入并调用水平滚动插件hScrollPane

<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}
});

缩略图点击切换对应大图

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;
});

hScrollPane插件API