<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. Shiro - 与Spring集成

    本文是针对web应用web.xml: <filter> <filter-name>shiroFilter</filter-name> <filter-clas ...

  2. js生成6位随机码

    js生成6位随机数字: let chars = '0123456789'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/ let maxPos = chars.len ...

  3. thinkjs crud练习

    今天看了下thinkjs(v2.1.7),做了一个简单的入门demo,基于mysql数据库增删改查,详细源码如下: 页面整体展示: 会员新增: 删除: 查询: 主页面: <!DOCTYPE ht ...

  4. Java并发编程：深入剖析ThreadLocal （总结）

    ThreadLocal好处 Java并发编程的艺术解释好处是:get和set方法的调用可以不用在同一个方法或者同一个类中. 问答形式总结: 1. ThreadLocal类的作用 ThreadLocal ...

  5. maven（5）--依赖特性

    依赖的子标签中有scope,常用值有compile.provide.test.runtime compile:编译范围有效,即编译和打包时都会将这个依赖存储 provide:编译测试有效,但是打包是将 ...

  6. 第7章 征服CSS3选择器（下）

    :enabled选择器 在Web的表单中,有些表单元素有可用(":enabled")和不可用(":disabled")状态,比如输入框,密码框,复选框等.在默认 ...

  7. JavaScript Set Homepage and Favorite

    // JavaScript Set Homepage and Favorite // <a href="javascript:AddFavorite(window.location,d ...

  8. 04_dubbo_ioc

    [dubbo的IOC实现方法] dubbo的IOC具体实现在:T injectExtension( T instance )方法中,该方法在3个地方被使用: ExtensionLoader.getEx ...

  9. PeekMessage&GetMessage

    原文:http://www.cnblogs.com/faceang/archive/2010/05/25/1743757.html PeekMessage与GetMessage的对比相同点:PeekM ...

  10. hook的函数传入类

    简单记录 比如要hook一个app包中一个类的private void c(dmp dmp1),其中dmp是个类,这种的处理的方式如下: 用cydiasubstrate hook框架 1.先通过hoo ...