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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.2.js"></script>

<title>无缝滚动图片js和jquery</title>

<style>

*{ margin:0; padding:0;}

.wrap{ margin:100px auto; width:600px; border:1px solid #ccc; height:200px; overflow:hidden;}

.siler{ float:left; width:3000px;}

ul{ list-style:none;}

.siler li{ float:left;}

</style>

</head>

<body>

<div class="wrap" id="wrap">

<ul class="siler" id="siler">

<li class="s1" id="s1">

<ul>

<li><img src="data:images/01.jpg" /></li>

<li><img src="data:images/02.jpg" /></li>

<li><img src="data:images/03.jpg" /></li>

<li><img src="data:images/04.jpg" /></li>

</ul>

</li>

<li class="s2" id="s2"></li>

</ul>

</div>

<script>

/*var wrap=$(".wrap");

var s1=$(".s1");

var s2=$(".s2");

var time=30;

s2.html(s1.html());

function marquee(){

if(wrap.scrollLeft()>=s1.width())

{

wrap.scrollLeft(0);

}

else{

wrap.scrollLeft(wrap.scrollLeft()+1);

}

}

$(function(){

var s=setInterval(marquee,time);

wrap.hover(function(){

clearInterval(s);

},function(){

s=setInterval(marquee,time);

})

})  //jquery写法

*/

</script>

<script>

function $(id){return document.getElementById(id);}

var time=30;

var wrap=$("wrap");

var s1=$("s1");

var s2=$("s2");

s2.innerHTML=s1.innerHTML;

function marquee(){

if(wrap.scrollLeft>=s1.offsetWidth){

wrap.scrollLeft-=s1.offsetWidth;

}

else{

wrap.scrollLeft++;

}

}

var siling=setInterval(marquee,time);

wrap.onmouseover=function(){

clearInterval(siling);

}

wrap.onmouseout=function(){

siling=setInterval(marquee,time);

}

</script>

</body>

</html>

(转载)无缝滚动图片的js和jquery两种写法的更多相关文章

  1. js和jquery 两种写法 鼠标经过图片切换背景效果

    这个是javascript的写法 <img src="res/img/shop-c_32.jpg" alt="" onmouseover="th ...

  2. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  3. JS对象转URL参数(原生JS和jQuery两种方式)

    转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: $.ajax({ type: "POST", url: "some.php", da ...

  4. 常见浏览器的宽高代码写法！有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站

    我的个人网站 点击链接!欢迎大家访问 下面是网页一些常见的宽高的获取.........这是原生的写法(JavaScript) 网页可见区域宽: document.body.clientWidth 网页 ...

  5. js对象的两种写法

    <script>     //定义一个对象,提供对应的方法或者属性     var s = {         sd1: function () { },         sd2: fun ...

  6. jquery图片无缝滚动代码左右 上下无缝滚动图片

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

  7. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

  8. 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

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

  9. php如何防止图片盗用/盗链的两种方法(转)

    图片防盗链有什么用? 防止其它网站盗用你的图片,浪费你宝贵的流量.本文章向大家介绍php防止图片盗用/盗链的两种方法 Apache图片重定向方法 设置images目录不充许http访问 Apache服 ...

随机推荐

  1. Windows进程

    一.Windows进程 1.进程 进程是一种容器,包含了应用程序实例的各种资源. 2.Windows进程的一些特点 2.1.进程中包含了执行代码等资源 2.2.进程都具有私有的地址空间 2.3.每个进 ...

  2. Android学习笔记（三）Application类简介

    每次运行APP时,Application类都保持实例化状态.与Activity不同,配置改变不会导致应用程序重启.通过继承Application类,可以完成一下3项工作: · 对Android运行时广 ...

  3. php写excel

    $this->loadexcel();        $objPHPExcel = new PHPExcel();        $objPHPExcel->getProperties() ...

  4. 003-python列表

    Python 列表(list) 列表是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. 列表的基本操作: 索引 切片 追 ...

  5. 微信公众平台--网页授权获取用户基本信息（snsapi_base方式）

    关于snsapi_base网页授权的说明 以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回调 ...

  6. 10881 - Piotr's Ants(排序）

    题目链接:10881 - Piotr's Ants 题目大意:在一个长为L的木棒上有n只蚂蚁,给出蚂蚁的初始位置以及方向,问说移动T秒后各个蚂蚁的位置以及状态,如果两只蚂蚁在移动的过程中相撞,则会同时 ...

  7. 遇到奇怪的C#/C/C++或者Java的bug可以去问问Coverity

    Coverity7月16号在博客Ask The Bug Guys中说以后遇到奇怪的C#/C/C++或者Java的bug可以给TheBugGuys@coverity.com发邮件.然后这些问题就会到一些 ...

  8. Java 多线程并发 Future+callable 实例

    需求:一个业务实现 查询, 因为 要查询十几次, 所以每个平均0.6秒, 之前只有主线程一步步查 ,结果用了10秒,效率十分低下 , 于是改用线程池并发: 以下是代码设计: 1.线程池工具类: pac ...

  9. Lucene IndexReader,IndexWriter,IndexSearcher 缓存应用

    1.IndexManager类,用于提供IndexReader,IndexWriter,IndexSearcher获取接口 import java.io.File; import java.io.IO ...

  10. Eclipse启动 报错[Failed to load the JNI shared library jvm.dll

    准备要做java服务器,在安装开发环境时,启动Eclipse报错[Failed to load the JNI shared library jvm.dll] 研究了下,造成错误的原因是由于eclip ...