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. HDU 4619 Warm up 2 最大独立集

    Warm up 2 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=4619 Description Some 1×2 dominoes are pla ...

  2. css-stylus

    1.stylus 对定义CSS的方式进行了改变,允许我们简化CSS的书写格式,同时允许我们定义变量.定义函数来操作CSS CSS处理器类型: sass/less/stylus stylus结构 1.1 ...

  3. Swift使用NSKeyedArchiver进行数据持久化保存的经验

    iOS提供了几种数据持久化保存的方法,有NSKeyedArchiver,Property List,NSUserDefaults和CoreData.我学习下来,觉得保存应用内的诸如列表,记录这些东西, ...

  4. 【转】2012年7月12 – 腾讯公司 WEB高级应用开发工程师 最新面试题

    腾讯面试(WEB高级应用开发工程师<PHP>)非答案啊!!! 开始正题之前,容博主啰嗦两句吧,呵呵.(你也可跳过直接到红色字体看题!) 腾讯一直是我很敬重的企业,尽管小企鹅在战略上饱受争议 ...

  5. JSON数据转换到POCO的代码

    转载:http://www.cnblogs.com/wintersun/archive/2012/09/14/2684708.html 在Visual Studio 2012中轻松把JSON数据转换到 ...

  6. 结构体序列为JSON

    结构体序列为JSON 本例运行效果图: uses SynCommons; const /// JSON字符串 JSON1 = '{' + #13#10 + '"glossary": ...

  7. pm2-web

    A web based monitor for PM2. Multiple hosts With the release of 0.11 pm2 no longer uses TCP sockets ...

  8. windows如何查看删除记录

    方法 打开组策略中的计算机配置-Windows设置-安全设置-本地策略-审核策略的审核对对像防问, 双击出现的对话框中钩选成功和失败,经过上面的设置,现在就可以设置文件和文件夹的审核了.(注须在NTF ...

  9. 设计原则：消除Switch...Case的过程，可能有点过度设计了。

    备注 不要重复自己,也不要重复别人,一旦养成了“拷贝和粘贴”的习惯,写程序的时候非常容易导致重复,好在一直暗示自己要稍后进行重构,本文给出一个重构的示例. 需求 需求:按照年.月和日显示销售数据,根据 ...

  10. 38 个免费开源的 CSS 下拉导航菜单

    http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus