JavaScript js无间断滚动效果 scrollLeft方法 使用模板

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> 无间断滚动scrollLeft套用模板 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">

<style>
#外层div的id值{width:px; height:px; overflow:hidden;border:0px solid #ccc;}
/*外层div 宽度为显示宽度*/
#内层div的id值{width:px;}
/*内层div的宽度设置为子层div的总宽度，如2400*/
#图片组1的id值,#图片组2的id值{width:px;float:left;}
#图片组1的id值 img,#图片组2的id值 img{width:px;height:px;}
</style>

</head>
<body>
<div id="外层div的id值">
  <div id="内层div的id值">
    <div id="图片组1">
        <img src="http://blog.163.com/hongshaoguoguo@126/blog/../images/xxxx/img1.jpg">
        <img src="http://blog.163.com/hongshaoguoguo@126/blog/../images/xxxx/img2.jpg">
        <img src="http://blog.163.com/hongshaoguoguo@126/blog/../images/xxxx/img3.jpg">
        <img src="http://blog.163.com/hongshaoguoguo@126/blog/../images/xxxx/img4.jpg">
    </div>
    <div id="图片组2"></div>
  </div>
</div>

<script>
 /*
  *图片循环滚动切换js效果——模板
  */
  (function(){
  var 变量名1 = document.getElementById("外层div的id值");
  var img1 = document.getElementById("图片组1的id值");
  var img2 = document.getElementById("图片组2的id值");
  var imgs =变量名1.getElementsByTagName('img');
  var timer1 = null;//计时器1，控制滚动
  var timer2 = null;//计时器2，控制停止后的重滚
  img2.innerHTML = img1.innerHTML;//将img1中的html标签放置于img2中
 /*
  *图片滚动的控制
  *当图片滚动到指定位置，进行重置
  *每次调用该函数均执行一次stopScroll函数
  */
  function imgScroll(){
    if(变量名1.scrollLeft >= img2.offsetWidth){
      变量名1.scrollLeft=0;
    }else{
      变量名1.scrollLeft+=3;//控制左滚距离
    }
    stopScroll();
  }
 timer1 = setInterval(imgScroll,25);
 /*
  *图片自动停止滚动效果
  *每滚动一张图片，清除滚动效果
  *1秒后再次调用imgScroll函数，实现滚动
  */
  function stopScroll(){
    if(变量名1.scrollLeft%imgs[0].offsetWidth == 0)
    {
        clearInterval(timer1);
        timer2 = setTimeout('timer1 = setInterval(imgScroll,25)',1000);
    }
    
  }
})();
</script>
</body>
</html>

JavaScript js无间断滚动效果 scrollLeft方法 使用模板的更多相关文章

  1. DIV+javascript实现首尾相连循环滚动效果

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

  2. 使用javascript开发的视差滚动效果的云彩

    在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...

  3. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

  4. javascript实现图片无缝滚动（scrollLeft的使用方法介绍）

    <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...

  5. 二、JavaScript语言--JS实践--信息滚动效果制作

    运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...

  6. Javascript实现信息滚动效果的方法

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  7. IOS跑马灯效果，实现文字水平无间断滚动

    ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer ...

  8. fullpage.js全屏滚动插件使用方法

    在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...

  9. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

随机推荐

  1. thinkphp基础入门(1)

    ThinkPHP目录如下,Application顾名思义就是应用的意思(我们的代码放在这里),Public就是公共文件的意思(主要放JS CSS 等前端资源文件),ThinkPHP文件是框架的核心包( ...

  2. DeDe缩略图路径的修改

    今天在使用dedecms的时候,遇到的一点小问题,移站的时候缩略图不显示.然后就去百度搜了一下,出来的都是千篇一律. 因为一个网站里面缩略图太多,手动比较慢而已费时间,  俗话说的好“时间就是生命” ...

  3. 使用telnet操作memcache，一般不常用

    使用telnet操作memcache,一般不常用   1.使用方法 1. 连接到memcached telnet 192.168.1.100 11211 add name 0 60 5     [说明 ...

  4. Asp.net禁用页面缓存的方法

    方法1.在Asp页面首部<head>中添加如下代码 Response.Buffer = True Response.ExpiresAbsolute = Now() - 1 Response ...

  5. xpath应用

    import java.io.File; import java.io.FileOutputStream; import org.dom4j.Document; import org.dom4j.El ...

  6. navicat:cannot create oci environment

    1.请注意红色箭头处的配置是从oracle官网下载的安装包 ,当然百度也是很强大的.(建议是在navicat安装目录下解压) 2.红色方框内的是你本地的oracle数据库的sqlplus.exe启动地 ...

  7. VHDL学习之TEXTIO在仿真中的应用

    TEXTIO 在VHDL 仿真与磁盘文件之间架起了桥梁,使用文本文件扩展VHDL 的仿真功能.本文介绍TEXTIO 程序包,以一个加法器实例说明TEXTIO 的使用方法,最后使用ModelSim 对设 ...

  8. 当DOCKER遇上ESXI

    特别是你要为DOCKER窗口设置静态IP,且和公司局域网打成一片的时候, 苦逼的测试就会开始,我差不多前前后后测试了四五天,一百多个容器报废. NETNS,NSENTER,PIPWORK,各种镜像合下 ...

  9. 完整的开发一个ContentProvider步骤

    1.定义自己的ContentProvider类,该类需要继承Android提供的ContentProvider基类.2.向Android系统注册这个"网站",也就是在Android ...

  10. error: No resource identifier found for attribute ‘backIcon’ in package

    异常提示: 今天我新创建了一个自定义控件,我为他定义了一个属性为backIcon,但是当我在xml设置这个属性之后,xml布局界面提示以下错误: 错误原因: 在网上查找错误原因的时候,有文章说这是因为 ...