js图片垂直和水平两种无缝滚动演示和下载

js多组图片水平或垂直滚动，互相不影响，支持图片滚动方向（无缝向左滚动或向上滚动）。鼠标滑过产品滚动图片暂停，离开产品图片则继续滚动。介绍一款之前分享过的无缝滚动插件http://www.sucaihuo.com/js/212.html，也可以支持文字滚动。

分类：图片代码 > 图片滚动难易：初级

查看演示下载资源下载积分： 20 积分

演示一：水平向左滚动html代码

<div id="marquee1" class="marqueeleft">
    <div style="width:8000px;">
        <ul id="marquee1_1">
            <li>
                <a class="pic" href="http://www.sucaihuo.com/js/552.html"><img width="135" height="104" src="images/1.jpg"></a>
                <div class="txt"><a href="http://www.sucaihuo.com/js/552.html">jQuery放烟花插件</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaihuo.com/js/553.html"><img width="135" height="104" src="images/2.jpg"></a>
                <div class="txt"><a href="http://www.sucaihuo.com/js/553.html">html5响应式触屏移动端音频播放器</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaihuo.com/js/554.html"><img width="135" height="104" src="images/3.jpg"></a>
                <div class="txt"><a href="http://www.sucaihuo.com/js/554.html">jquery背景移动插件</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaihuo.com/js/555.html"><img width="135" height="104" src="images/4.jpg"></a>
                <div class="txt"><a href="http://www.sucaihuo.com/js/555.html">jQuery自定义下拉框插件</a></div>
            </li>

        </ul>
        <ul id="marquee1_2"></ul>
    </div>
</div>

<script type="text/javascript">marqueeStart(1, "left");</script>

演示二：垂直向上无缝滚动

<div id="marquee2" class="marqueetop">
    <div style="height:8000px;">
        <ul id="marquee2_1">
            <li>
                <a class="pic" href="http://www.sucaihuo.com/js/381.html"><img width="135" height="104" src="images/1.jpg"></a>
                <div class="txt"><a href="http://www.sucaihuo.com/js/381.html">jQuery仿QQ空间浏览相册</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaihuo.com/js/382.html"><img width="135" height="104" src="images/2.jpg"></a>
                <div class="txt"><a href="http://www.sucaihuo.com/js/382.html">PHP中SESSION和COOKIE基本用法</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaihuo.com/js/383.html"><img width="135" height="104" src="images/3.jpg"></a>
                <div class="txt"><a href="http://www.sucaihuo.com/js/383.html">HTML5制作简单的钟表</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaihuo.com/js/384.html"><img width="135" height="104" src="images/4.jpg"></a>
                <div class="txt"><a href="http://www.sucaihuo.com/js/384.html">jQuery拉伸搜索框</a></div>
            </li>

        </ul>
        <ul id="marquee2_2"></ul>
    </div>
</div>

<script type="text/javascript">marqueeStart(2, "up");</script>