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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

滚动列表

<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.erdangjiade.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.erdangjiade.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.erdangjiade.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.erdangjiade.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