<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. 第六章使用java实现面向对象-集合框架

    一:接口:即表示集合的抽象数据类型. 实现:即集合框架中接口的实现. 算法:在一个实现了某个集合框架中的接口的对象身上完成某种有用的计算的方法,例如查找. 排序等. Collection 接口存储一组 ...

  2. form表单在发送到服务器时候编码方式

    enctype(编码方式):规定了form表单在发送到服务器时候编码方式.有如下的三个值可选: 1.application/x-www-form-urlencoded.默认的编码方式.但是在用文本的传 ...

  3. svn的使用总结

    在网上看到了以前介绍非常全的svn的文章,拿来分享 原文网址  http://www.cnblogs.com/jx270/archive/2013/03/04/2943595.html 还有一篇更基础 ...

  4. 来谈谈你对CSS盒模型的认识？

    任何一个网页的搭建都离不开盒模型的堆砌.应该说css模型是web的一个根基,最后呈现出来的效果不同无非就是在高宽.内容与背景删的区别而已. 那么CSS模型有什么认识的呢? 首先,css盒模型有几种呢? ...

  5. JavaScript中按键事件的e.keyCode || e.which || e.charCode

    1.浏览器的按键事件 浏览器有3种按键事件——keydown,keypress和keyup,分别对应onkeydown.onkeypress和onkeyup3个事件句柄. 一个典型的按键会产生所有这三 ...

  6. jquery插件一直报错：xx is not a function

    当然像js文件未引用或者js插件使用方法不对这样的解决办法想必大家都已经试过了. 那么在放弃前请最后看一下是不是引用了两个jquery文件. 引用了两个jquery文件! 引用了两个jquery文件! ...

  7. 使用JS完成首页轮播图效果

    获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...

  8. 提高 GitHub 网页访问速度 以及 Git Clone 速度 的小技巧

    参考: http://www.cnblogs.com/mico-liu/p/9303817.html https://blog.csdn.net/qq756684177/article/details ...

  9. 02_NIO简单实例

    [一个用NIO实现的客户端向服务端单向通信的例子] [服务端程序] package com.nio.test; import java.io.IOException; import java.net. ...

  10. Python爬虫教程-28-Selenium 操纵 Chrome

    我觉得本篇是很有意思的,闲着没事来看看! Python爬虫教程-28-Selenium 操纵 Chrome PhantomJS 幽灵浏览器,无界面浏览器,不渲染页面.Selenium + Phanto ...