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; width: 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

 

js 实现图片的无缝滚动的更多相关文章

  1. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  2. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  3. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  4. JS 阶段小练习~ 无缝滚动

    结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...

  5. css 图片的无缝滚动

    转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...

  6. js函数——倒计时模块+无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. 【js】横/纵向无缝滚动

    1.纵向无缝滚动(类似淘宝) ps:存在一个问题,当鼠标移入时,未关闭定时器 <!DOCTYPE html> <html> <head> <meta char ...

  8. js 实现图片无限横向滚动效果

    门户网站好多都有产品无线滚动展现的效果: 测试demo1 -- 非无缝滚动(可以看出来从头开始的效果): css样式如下: .box{ width: 1000px; border: 1px solid ...

  9. js 图片实现无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Java并发（二）：Java内存模型

    一.硬件内存架构 一个现代计算机通常由两个或者多个CPU.其中一些CPU还有多核.每个CPU在某一时刻运行一个线程是没有问题的.如果你的Java程序是多线程的,在你的Java程序中每个CPU上一个线程 ...

  2. Git与SVN

    http://www.nowamagic.net/academy/detail/48160207 前面提到,Linus一直痛恨CVS及SVN这些集中式的版本控制系统,为什么呢?Git是分布式版本控制系 ...

  3. Linux下swap分区多大才合适的问题探讨

    说明: 1.这个话题在每个Linux发行版中都各不相同,且在当下内存硬盘的时代下,再组个磁盘阵列之后速度相当. 2.我觉得硬盘大的情况下,有多大搞多大,我只要控制内存的使用率在99%时才使用swap, ...

  4. Bipolar transistor boosts switcher's current by 12 times

    The circuit in Figure 1 uses a minimal number of external parts to raise the maximum output current ...

  5. Get just enough boost voltage - current-mirror circuit - VOUT tracks VIN varies

    Adding a current-mirror circuit to a typical boost circuit allows you to select the amount of boost ...

  6. WebService如何抛出干净的异常

    转载:http://www.cnblogs.com/ahdung/p/3953431.html 说明:[干净]指的是客户端在捕获WebService(下称WS)抛出的异常时,得到的ex.Message ...

  7. 使用apache htpasswd生成加密的password文件，并使用.htaccess控制文件夹訪问

    htpasswd 是apache的小工具.在apache安装文件夹bin下可找到. Usage: htpasswd [-cmdpsD] passwordfile username htpasswd - ...

  8. java 调用shell命令

    原文:http://kongcodecenter.iteye.com/blog/1231177 Java通过SSH2协议执行远程Shell脚本(ganymed-ssh2-build210.jar)   ...

  9. WebKit 在 Windows 平台下编译小结

    虽然WebKit 已经越来越多的被广大程序员接受,但其编译过程却非常之痛苦.下面将我编译WebKit 代码的经验与大家分享. 1) 获取WebKit 源代码 WebKit 源代码是使用Subversi ...

  10. python笔记18-sort和sorted区别

    前言 python的排序有两个方法,一个是list对象的sort方法,另外一个是builtin函数里面sorted,主要区别: sort仅针对于list对象排序,无返回值, 会改变原来队列顺序 sor ...