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. bzoj 3784

    第三道点分治. 首先找到黄学长的题解,他叫我参考XXX的题解,但已经没有了,然后找到另一个博客的简略题解,没看懂,最后看了一个晚上黄学长代码,写出来然后,写暴力都拍了小数据,但居然超时,....然后改 ...

  2. Codeforces Round #303 (Div. 2) A. Toy Cars 水题

     A. Toy Cars Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/545/problem ...

  3. Codeforces Round #301 (Div. 2) B. School Marks 构造/贪心

    B. School Marks Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/540/probl ...

  4. x-requested-with 请求头 区分ajax请求还是普通请求

    在服务器端判断request来自Ajax请求(异步)还是传统请求(同步): 两种请求在请求的Header不同,Ajax 异步请求比传统的同步请求多了一个头参数 1.传统同步请求参数 accept  t ...

  5. linux创建swap分区

    创建交换分区 root@zabbix-server:~# mkdir /swap root@zabbix-server:~# cd /swap/ root@zabbix-server:/swap# l ...

  6. FIS3使用官方例子流程

    fis3 的常用例子:https://github.com/fex-team/fis3-demo git链接可在页面中获取替换下面的git链接: 例子准备: git clone https://git ...

  7. 淘宝API开发第一步

    1.登录淘宝开放平台:http://open.taobao.com/ 2.添加网站 (验证完网站后,会提醒“JSSDK以激活提交审核按钮”,这个需要的UV达100,按钮才会亮,审核过程中也得保持UV的 ...

  8. [转] NSMapTable 不只是一个能放weak指针的 NSDictionary

    NSMapTable 不只是一个能放weak指针的 NSDictionary NSMapTable是早在Mac OS X 10.5(Leopard)的引入集合类.乍一看,这似乎是作为一个替换NSDic ...

  9. Python学习（四）数据结构 —— list tuple range

    序列类型 list   tuple   range list 和 tuple list: 列表,由 [] 标识: 有序:可改变列表元素 tuple: 元组,由 () 标识: 有序:不可改变元组元素(和 ...

  10. iOS开源项目：AwesomeMenu

    https://github.com/levey/AwesomeMenu 模仿Path的menu,使用CoreAnimation实现. 1.首先说使用 AwesomeMenuItem *starMen ...