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

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

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

淘建站为您提供更多_图片代码_图片滚动_滚动_垂直,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 413 次

下载资源

46 积分

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

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

<div id="marquee1" class="marqueeleft">
    <div style="width:8000px;">
        <ul id="marquee1_1">
            <li>
                <a class="pic" href="http://www.sucaiq.com/js/552.html"><img width="135" height="104" src="images/1.jpg"></a>
                <div class="txt"><a href="http://www.sucaiq.com/js/552.html">jQuery放烟花插件</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaiq.com/js/553.html"><img width="135" height="104" src="images/2.jpg"></a>
                <div class="txt"><a href="http://www.sucaiq.com/js/553.html">html5响应式触屏移动端音频播放器</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaiq.com/js/554.html"><img width="135" height="104" src="images/3.jpg"></a>
                <div class="txt"><a href="http://www.sucaiq.com/js/554.html">jquery背景移动插件</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaiq.com/js/555.html"><img width="135" height="104" src="images/4.jpg"></a>
                <div class="txt"><a href="http://www.sucaiq.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.sucaiq.com/js/381.html"><img width="135" height="104" src="images/1.jpg"></a>
                <div class="txt"><a href="http://www.sucaiq.com/js/381.html">jQuery仿QQ空间浏览相册</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaiq.com/js/382.html"><img width="135" height="104" src="images/2.jpg"></a>
                <div class="txt"><a href="http://www.sucaiq.com/js/382.html">PHP中SESSION和COOKIE基本用法</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaiq.com/js/383.html"><img width="135" height="104" src="images/3.jpg"></a>
                <div class="txt"><a href="http://www.sucaiq.com/js/383.html">HTML5制作简单的钟表</a></div>
            </li>
            <li>
                <a class="pic" href="http://www.sucaiq.com/js/384.html"><img width="135" height="104" src="images/4.jpg"></a>
                <div class="txt"><a href="http://www.sucaiq.com/js/384.html">jQuery拉伸搜索框</a></div>
            </li>

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

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/803.html
js图片垂直和水平两种无缝滚动演示和下载 希望对你有帮助,感谢您的支持!
  • 滚动的齿轮动画

    滚动的齿轮动画

  • swiper滚动天气效果

    swiper滚动天气效果

  • css3滚动的圆球动画特效

    css3滚动的圆球动画特效

  • DIV+CSS制作有趣的页面滚动让猫奔跑的动画

    DIV+CSS制作有趣的页面滚动让猫奔跑的动画

  • marquee.js插件演示9种jQuery滚动效果

    marquee.js插件演示9种jQuery滚动效果

  • jQuery+multiscroll鼠标滚动全屏图

    jQuery+multiscroll鼠标滚动全屏图

  • jQuery支持鼠标滚动的垂直滚动手风琴

    jQuery支持鼠标滚动的垂直滚动手风琴

  • 简单的jQuery无缝向上滚动效果

    简单的jQuery无缝向上滚动效果

  • jQuery网页底部阴影浮动层文字滚动

    jQuery网页底部阴影浮动层文字滚动

  • jquery banner滑块导航条幻灯片轮播图片滚动

    jquery banner滑块导航条幻灯片轮播图片滚动

  • jquery hScrollPane水平滚动条美化插件商品图片横行展示

    jquery hScrollPane水平滚动条美化插件商品图片横行展示

  • Jquery实现滚动条滚动到底部加载内容

    Jquery实现滚动条滚动到底部加载内容

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2