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. Nginx 常见问题与错误处理

    常见问题与错误处理1. 400 bad request 错误的原因和解决办法配置 nginx.conf 相关设置如下.client_header_buffer_size 16k;large_clien ...

  2. 20162325 金立清 S2 W8 C17

    20162325 2017-2018-2 <程序设计与数据结构>第8周学习总结 教材学习内容概要 二叉查找树是一棵二叉树,对于其中的每个结点,左子树上的元素小于父结点的值,而右子树上的元素 ...

  3. Shell脚本：“syntax error:unexpected end of file”

    这种错误只能说是坑,如果没有见到过,很可能就要摔里头.解决问题是重要的,但弄明白问题的来源,往往更为重要. 所以要先扯一下,换行和回车的历史遗留问题. 在计算机出现之前,有个玩意叫电传打字机.每秒钟可 ...

  4. ACM -- 算法小结（八）字符串算法之Manacher算法

    字符串算法 -- Manacher算法 首先介绍基础入门知识,以下这部分来着一贴吧,由于是很久之前看的,最近才整理一下,发现没有保存链接,请原创楼主见谅. //首先:大家都知道什么叫回文串吧,这个算法 ...

  5. Jeeplus框架中问题解决

    1,文件上传后图片显示的问题 (1)问题:在这个组件的文档介绍里面写了这个组件是有预览功能的,但是我没有找到,就自己写了这个小功能. 在框架中下图中,这个文件上传组件只能将文件上传,然后将文件名显示出 ...

  6. python 3.x和2.x不同和改动

    参考于http://www.runoob.com/python/python-2x-3x.html 因为这几天换了电脑,之前电脑里装的是python2.x,因为那时候刚学的时候,很多教程都是用2.x. ...

  7. jmeter用beanshell调用自己写的jar进行MD5加密

    1.先在eclipse里面写好MD5的加密文件,用eclipse执行一遍,确保文件不会报错 Str2MD5.java 内容如下: package hehe.md5; import java.secur ...

  8. StringFormat

    public class StringFormatDemo { public static void main(String[] args) { String str = null; str = St ...

  9. 关于利用ajax时，设置访问延时的方法

    在实际开发中应使用后端的延时方法,一般为sleep,可以设置延时几秒后返回给前端请求的数据 众所周知,在js中,并不存在例如C++或者JAVA.PHP中的sleep延时方法, 目前仅有的所谓延时方法S ...

  10. 腾讯PHP工程师面试题两份

    试题一: PHP开发工程师笔试试卷 姓名:__________ 一.PHP开发部分 1．合并两个数组有几种方式,试比较它们的异同 2．请写一个函数来检查用户提交的数据是否为整数(不区分数据类型,可以为 ...