<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. 二：SpringMVC知识整理

    springmvc复习: 1.SpringMVC介绍 2.SpringMVC入门程序 1)创建web工程 2)导入jar包 3)在web.xml中配置前端控制器(指定上下文件的路径 classpath ...

  2. mysql-connector/python使用示例

    1.下载安装connector/python 地址:https://dev.mysql.com/downloads/connector/python/ 下载的版本(mysql-connector-py ...

  3. JavaScript事件流--事件冒泡、目标与事件捕获

    1.事件冒泡 微软提出了名为事件冒泡的事件流.事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面.也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象. 因 ...

  4. hdu 3091 Necklace 状态压缩dp *******

    Necklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 327680/327680 K (Java/Others)Total ...

  5. JS之原型式的继承

    创建一个Person的构造器 function Person(first, last, age, gender, interests) { this.name = { first, last }; t ...

  6. 【Udacity】数据的差异性：值域、IQR、方差和标准差

    一.值域(Range) Range = Max - Min 受异常值(Outliers)影响 二.四分位差(IQR) 四分位距(interquartile range, IQR),又称四分差.是描述统 ...

  7. 【 Oral English】Pronunciation

    一.英语音素 1.元音(元首,主要部分) 特点: a.无阻碍,拖很长认可辨别 b.声音响亮 2.辅音(重点,刻意练习) 特点: a.刻意阻碍 b.短促 二.汉语元素 1.音节:最小组成成分,而非元/辅 ...

  8. GTX650Ti，GT610安装黑苹果之经验与步骤

    安装这两个显卡的黑苹果都是10.9以上的版本,一个是10.9.2,一个是10.9.4,最后都完美.主板一个是Z77,一个是H61. 1. 开始安装完以后,显卡不工作,能够安全模式进去. 2. 删除Ap ...

  9. MSSQL 备份与恢复

    建立维护计划,需启用<SQL Server 代理>服务 建立三个子作业: 1. 按周进行的全备份,每周日零点执行 2. 按天进行的差异备份,每天中午12点执行 3. 按小时执行的事务日志备 ...

  10. 如何申请免费域名证书，以及在IIS上绑定

    1.前往https://freessl.cn/ 申请域名 证书 2.输入邮箱后,点击创建.文件验证方式 会自动下载一个压缩包,把该压缩包放到所申请的域名首层下.(不要重复创建,需要3,5分钟.最好手动 ...