利用js实现自定义滚动条特效

代码结构

1. HTML代码

<div id="box">
    <div class="list">
        <ul>
            <li><img src="img/1.jpg" /><p>iPhone 4</p></li>
            <li><img src="img/2.jpg" /><p>iPad 2</p></li>
            <li><img src="img/3.jpg" /><p>iPod touch</p></li>
            <li><img src="img/4.jpg" /><p>iPod classic</p></li>
            <li><img src="img/5.jpg" /><p>iPod shuffle</p></li>
            <li><img src="img/6.jpg" /><p>iPod nano</p></li>
            <li><img src="img/7.jpg" /><p>MacBook Air</p></li>
            <li><img src="img/8.jpg" /><p>MacBook Pro</p></li>
            <li><img src="img/9.jpg" /><p>Mac mini</p></li>
            <li><img src="img/10.jpg" /><p>Mac Pro</p></li>
        </ul>
    </div>
    <!--/list-->
    <div class="scrollBar">
        <div class="barL"></div>
        <div class="barM">
            <div class="bar">
                <div class="l"></div>
                <div class="r"></div>
            </div>
        </div>
        <div class="barR"></div>
    </div>
    <!--/scrollBar-->
</div>
<!--/box-->
<dl id="desc">
    <dt>功能说明：</dt>
    <dd>① 拖动滚动条，图片列表缓冲滑动至目标点；</dd>
    <dd>② 滚动条两端鼠标移入自动滑动；</dd>
    <dd>③ 滚动条滑动到两端自动更换为停止标识；</dd>
    <dd>④ 点击滚动条黑色背景区，滚动条及图片列表缓冲滑动至目标点；</dd>
    <dd>⑤ 支持键盘左右键；</dd>
    <dd>⑥ 支持鼠标滚轮。</dd>
    <dd class="ta-r">By — Ferris</dd>
</dl>
<div style="text-align:center;clear:both">
</div>