zoukankan      html  css  js  c++  java
  • js 实现图片的无缝滚动

    js 实现图片的无缝滚动

    CreateTime--2018年3月7日17:18:34

    Author:Marydon 

      测试成功

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="keywords" content="关键词,关键词">
    <meta name="description" content="本网页内容描述">
    <title>水平滚动-成功案例</title>
    <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
    <!-- 图片等比缩放 -->
    <script type="text/javascript" src="../js/drawImage.js"></script>
    <!-- 图片无缝滚动 -->
    <script type="text/javascript" src="../js/marquee.js"></script>
    
    <script type="text/javascript">
        $(function(){
            var marquee = new Marquee();
            // 右滚动
            //marquee.init(null,null,"imgContainer", "imgContainer_child");
            // 左滚动
            marquee.init("left",null,"imgContainer", "imgContainer_child");
        });
    </script>
    </head>
    <body>
        <!-- 
            照片的宽度:142*3=426px,所以父容器的宽度最大为426;
            要想扩大父容器的宽度,必须再增加照片,而且也必须遵循上面的规则
        -->
        <div id="imgContainer"
            style="overflow: hidden; height: 140px;  426px; background: url(../images/bgImg.jpg);">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td id="imgContainer_child">
                            <table border="0" cellpadding="11" cellspacing="0" style="margin-top: 9px;">
                                <tbody>
                                    <tr>
                                        <td>
                                            <a href="#" target="_blank" class="">
                                                <img src="../images/6.png"
                                                    title="第一张" onload="javascript:DrawImage(this,145,100)"/>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="#" target="_blank" class="">
                                                <img src="../images/9.png"
                                                    title="第二张" onload="javascript:DrawImage(this,145,100)"/>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="#" target="_blank" class="">
                                                <img src="../images/14.png"
                                                    title="第三张" onload="javascript:DrawImage(this,145,100)"/>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>

      效果展示:

      左滚动

           

      右滚动

      

      说明:这是截的动态图,实际运行并不卡顿!

      这里只展示了左滚动和右滚动,想掌握上滚动与下滚动或获取源码+素材的童鞋,请看下方的指引“如何获取本人原创代码?”

     相关推荐:

      图片等比缩放,请移步至文章:js实现图片的等比例缩放

      图片无缝滚动,请移步至文章:marquee.js

  • 相关阅读:
    每天一点Linux type命令的用法
    Source Insight 3.5 序列号分享
    每天一点Linux 查看帮助
    解决Eclipse因为插件加载失败而无法启动的问题
    php生成随机字符串
    mysql 获取刚插入行id汇总
    mysql left join,right join,inner join用法分析
    php中mkdir()函数的权限问题
    php生成唯一数值
    PHP函数mysql_affected_rows()与mysql_num_rows()有什么区别?
  • 原文地址:https://www.cnblogs.com/Marydon20170307/p/8523933.html
Copyright © 2011-2022 走看看