js图片列表滑块滚动条预览特效代码下载


js图片列表滑块滚动条预览特效代码下载
js图片列表滑块滚动条预览特效代码下载以及图片列表、滑块滚动条预览等js/jquery网页特效代码下载。

1. HTML代码

<div id="box">
    <div class="list">
        <ul style="width: 1520px; left: -347px;">
            <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" style="left: 150px;">
                <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>
</dl>

相关推荐

发表评论

相关文章