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. DEDECMS最新友情链接getshell漏洞分析

    先上exp: <?php //print_r($_SERVER); $referer = $_SERVER['HTTP_REFERER']; $dede_login = str_replace( ...

  2. adroid swipeRefreshLayout无法显示进度条的问题

    一句话经验:必须嵌套scrollerview或者listview

  3. JSON 与 JS 对象的关系

    很多人搞不清楚 JSON 和 Js 对象的关系,甚至连谁是谁都不清楚.简单来说: JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串. 如 var obj ...

  4. [转]STRUTS2中的OGNL

    OGNL表达式是(Object-Graph Navigation Language)是对象图形化导航语言.OGNL是一个开源的项目,struts2中默认使用OGNL表达式语言来显示数据.与serlve ...

  5. 【美】范·K·萨普曼 － 通向财务自由之路（2013年11月26日）

    <通向财务自由之路> 作 者:[美]范·K·萨普曼  译 者:董梅 系 列: 出 版:机械工业出版社 字 数:约40千字 阅读完成:2013年11月26日

  6. 【spring data jpa】jpa中criteria拼接in查询

    示例代码: public static Specification<GoodsType> where(final GoodsType goodsType){ return new Spec ...

  7. css方法实现div固定浏览器底端

    CSS: ;;background-image:url(text.txt);/*for IE6 防抖,也可以用一张图片URL*/ background-attachment:fixed;} /*是否存 ...

  8. Appium+python自动化20-查看iOS上app元素属性

    前言 学UI自动化首先就是定位页面元素,玩过android版的appium小伙伴应该都知道,appium的windows版自带的Inspector可以定位app上的元素 Mac版的appium1.6的 ...

  9. UIScrollView 几乎所有的属性和方法

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  10. Andorid之Annotation框架初使用（五）

    注入res文件夹的资源: @StringRes @EActivity public class MyActivity extends Activity { @StringRes(R.string.he ...