<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. nginx 代理转发 wcf接口

    前言 以前对比过enginx和其他几个web服务器(IIS,Apache,lighttpd)的处理静态文件的能力,enginx是最好的,甚至超过其他的几倍. 虽说enginx官方声明在Windows上 ...

  2. <td>标签clospan和rowspan 可横跨列数和行数

    <td colspan="2"> <input type="text" name="reason_other" size= ...

  3. php strpos返回字符串首次出现的位置

    (PHP 4, PHP 5, PHP 7) strpos — 查找字符串首次出现的位置 说明 mixed strpos ( string $haystack , mixed $needle [, in ...

  4. 记一次Ubuntu 16.04 server安装中的坑

    最近博主搞了一台迷你主机,又刚好有时间去折腾,所以我打算把这台机子打造成一台迷你服务器,用来跑跑爬虫.挂挂网站 介于我我这台机子的配置比较垃圾(intel J1900+4G+64G),跑起Window ...

  5. java通过超链接和servlet配置实现服务器文件下载

    1.在页面上面我们可以简单的写成: <td align="center""> <a href="<c:url value="/ ...

  6. Java并发编程：volatile关键字解析（学习总结-海子）

    博文地址:Java并发编程:volatile关键字解析

  7. Bzoj3510：首都

    Sol \(LCT\)动态维护树重心 方法一 因为只有加边,所以可以暴力启发式合并,维护重心 维护子树信息,子树大小不超过一半 复杂度两只\(log\) 方法二 扣出两个重心的链,链上二分找 每次\( ...

  8. easyui grid 增加合计行

    一.首先,easyui  grid 的 showfooter 属性设置为 true $aplgrid.datagrid({ data: globalExpenseClaimForm.ExpenseCl ...

  9. 获取当前时间CTime

    std::string getcurtime(){ USES_CONVERSION; CTime z_CurTime; CString z_TimeStr; z_CurTime = CTime::Ge ...

  10. 旋转数组的最小数字（C++ 和 Python 实现）

    (说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的 ...