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