<style type="text/css">

*{ margin:0; padding:0;}

body { font:12px/1.8 Arial; color:#666;}

h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}

.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}

.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}

#slide{overflow:hidden;width:900px;margin:100px auto;}

ul{list-style:none;} li{float:left;} .slideul1{width:3999px;}

</style>

<script type="text/javascript" src="/jquery-1.4.4.min.js"></script>

<body>

<h1 class="tit-h1">jquery图片左右连续滚动</h1>

<div class="wrap">

<div id="slide">

<ul class="slideul1">

<li class="slideli1">

<ul class="slideul2">

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

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

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

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

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

</ul> <li class="slideli2"></li> </ul>

</div>

<script type="text/javascript">

var _speed=30;
 var _slide = $("#slide"); 
var _slideli1 = $(".slideli1"); 
var _slideli2 = $(".slideli2"); 
_slideli2.html(_slideli1.html()); 
function Marquee(){ 
　　if(_slide.scrollLeft() >= _slideli1.width()) 
　　　　_slide.scrollLeft(0); 
　　else{ _slide.scrollLeft(_slide.scrollLeft()+1);
 } 
} 
$(function(){ 
//两秒后调用 
var sliding=setInterval(Marquee,_speed) _slide.hover(function() { 
//鼠标移动DIV上停止 
clearInterval(sliding); 
},function(){ 
//离开继续调用 
sliding=setInterval(Marquee,_speed); });
 });
</script> 
</div>

　　

jquery 写的图片左右连续滚动的更多相关文章

  1. javascript小记五则：用JS写一个图片左右自由滚动的“跑马灯”效果

    之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...

  2. 用jquery写出图片自动轮播效果

    相关代码如下,只要把代码粘贴进编辑器,修改图片路径,即可看到效果. 1.html部分 <body>   <ul class="banner">   < ...

  3. 用jquery写的图片懒加载

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. jquery连续滚动

    本文非常详细的讲解在jquery里实现图片或文字的连续循环滚动的方法. 连续循环滚动是我们在网页开发中经常要用到的特效,在jquery里,我们要实现文字或图片的连续循环滚动是非常简单的.出处:http ...

  5. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

  6. 图片左右间隔滚动Jquery特效

    图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放,具体处理程序如下 <!DOCTYPE html > <html> <head> ...

  7. Jquery实现图片左右自动滚动

    图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML>  <html> ...

  8. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  9. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

随机推荐

  1. 比较2个文件内容不同行的shell脚本

    第一种:grep命令法 命令如下:grep -vxFf file1 file2 > a.txt 其中file2是大文件,file1是小文件 第一种:comm命令法 命令如下:comm  file ...

  2. [转]Using OData from ASP.NET

    本文转自:http://www.drdobbs.com/windows/using-odata-from-aspnet/240168672 By Gastón Hillar, July 01, 201 ...

  3. MyBatis_注解式开发

    一.注解式开发 mybatis的注解主要替换映射文件. 二.基础语法 注解首字母大写,因为注解与类.接口是同一级别的(类同一层级的:类,接口,注解,枚举).一个注解,后台对应着一个@interface ...

  4. C中的私有成员

    skynet_context声明在.h里 但定义在.c里面 外部使用的时候无法用ctx->handle获取私有成员,会提示解引用类型错误 必须用.h里函数获取ctx里属性.

  5. mysql启动服务出错--发生系统错误 1067。

    记以此安装mysql出错的问题,MySQL 服务无法启动.系统出错  发生系统错误 1067.进程意外终止. 今天在安装本地mysql是,使用net start mysql命令启动服务时,总是报106 ...

  6. Redis（MySQL和redis怎么分工合作的？）

    新手: redis也是服务器,主要部署在服务器上缓解服务器的压力,对于访问量交大的数据可以先缓存到redis,用户访问时直接访问redis,不用再直接访问数据库,缓解数据库的压力.mysql主要存储数 ...

  7. IntelliJ IDEA开发工具println报错的解决方法

    IntelliJ IDEA 编译 JSP,出现 out.println 报错,下图所示: 报错原因:println报红,这是因为没有关联好服务器! 解决方案:点击File->Project st ...

  8. Android DB类，支持MDB,SQLITE,SQLSERVER，支持查询、事务，对象直接插入和更新操作等

    直做数据库,最近花了点时间把自己常用的东西封装在一起. DBHelper using System; using System.Collections.Generic; using System.Te ...

  9. Android 文件的可读可写

    文件流形式的保存,获取: 设立文件的私有,可读,可写,公开: 效果图: /data/data中文件夹: 新建一个项目测试文件: 得到data/data,查看文件的特性:

  10. IIS7下设置上传大小的限制

    一.找到修改大小的配置文件和配置节点 打开你系统盘(我是C盘),找到 C:\Windows\System32\inetsrv\config\schema目录,该目录下有一个IIS_schema.xml ...