<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="./assets/js/jquery.js"></script>
</head>
<style>

</style>
<script type="text/javascript">
var t;
var speed = 2;//图片切换速度
var nowlan=0;//图片开始时间
function changepic() {
var imglen = $("div[name='pic']").find("div").length;//获取DIV 下的滚动条数
$("div[name='pic']").find("div").hide();//全部隐藏掉DIV

$("div[name='pic']").find("div").eq(nowlan).show();//只显示制定下表的DIV
nowlan = nowlan+1 ==imglen ?0:nowlan + 1;//计算下标
t = setTimeout("changepic()",1000);//重复执行
}

$(document).ready(function () {
changepic();
//鼠标在图片上悬停让切换暂停
$("div[name='pic']").hover(function () { clearInterval(t); });
//鼠标离开图片切换继续
$("div[name='pic']").mouseleave(function () { changepic(); });
});
</script>
<body>
<div name="pic" style="float:left; overflow:hidden;width:300px;height:240px;" >
<div style="border: 1px solid red;"><img width="300" height="240" src="./assets/img/1_thumb_G_1240902890710.jpg" alt="1"/></div>
<div style="border: 1px solid green;"><img width="300" height="240" src="./assets/img/3_thumb_G_1241422082679.jpg" alt="2"/></div>
<div style="border: 1px solid blue;"><img width="300" height="240" src="./assets/img/8_thumb_G_1241425513488.jpg" alt="3"/></div>
<div style="border: 1px solid blue;"><img width="300" height="240" src="./assets/img/8_thumb_G_1241425513488.jpg" alt="3"/></div>
</div>

</body>

jquery 实现的一款超简单的图片切换功能的更多相关文章

  1. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  2. jQuery编写的一款兼容IE6的图片轮播幻灯片

    jQuery编写的一款兼容IE6的图片轮播幻灯片,很不错的一款jquery特效.大家可以下载下来研究研究. 每隔几秒就自动切换一波图片,此效果兼容性还做的不错,适合居多的浏览器. 适用浏览器:IE6. ...

  3. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  4. JavaScript 最简单的图片切换

    使用前在文件外部要有1.jpg 2.jpg 只是简单的模仿flash图片切换,可在此基础上引申出各种不同的效果. 思路: 建立一个数组存放图片的src,然后调用setInterval周期性的调用cha ...

  5. 【分享】jQuery无插件实现 鼠标拖动图片切换 功能

    前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...

  6. Jquery导航悬停点击及首页图片切换功能

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx. ...

  7. JS实现简单的图片切换效果

    使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  8. JS简单实现图片切换

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  9. JavaScript一个简单的图片切换布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. spring 学习的开源项目

    http://jinnianshilongnian.iteye.com/blog/1508016 http://jinnianshilongnian.iteye.com/blog/2049092 sp ...

  2. c#基础语言编程-多态

    语言中的多态性是为了使程序有扩展性,为实现多态性,在程序中体现为接口.抽象类.父类.具体类. 接口就是一种规范,解决了多重继承的问题,类似一种规范,告诉我要做什么,具有什么能力,在接口中定义写行为属性 ...

  3. 【设计模式 - 13】之责任链模式（Chain Of Responsibility）

    1      模式简介 责任链模式的简介: 1.        责任链模式为请求创建了一个接收者对象的链,每个接收者都包含对另一个接收者的引用,如果一个对象不能处理该请求,那么它会把相同的请求传给下一 ...

  4. eclipse GWT开发环境的离线布置方法

    安装方法http://blog.csdn.net/u011029071/article/details/10143841 用eclipse自动更新安装失败N次,还是得手动来 以Google Plugi ...

  5. PullToRefreshListView调用onRefreshComplete方法 无法取消刷新的bug

    我们在使用框架:   PullToRefreshListView 实现下拉或者上拉加载时候,可能在上拉 完成时候,调用onRefreshComplete方法去 停止 刷新操作,但是,可能无效,测试产生 ...

  6. C# 打开PPT文件另存为PPTX

    /// <summary> /// rename PPT /// </summary> private static void renamePPT() { //add refe ...

  7. 使用jq工具在Shell命令行处理JSON数据

    由于近期要处理一些 JSON 数据格式.一大早经过一番搜索后,终于找到了 jq 这个非常棒的工具.jq 同意你直接在命令行下对 JSON 进行操作,包含分片.过滤.转换等等. 首先在mac下安装jq. ...

  8. java数组使用技巧

    参考网上文章,总结了一下java数组使用技巧,如下: package com.beijing.array; import java.nio.ByteBuffer; import java.util.A ...

  9. 安全通信 QSslSocket

    The QSslSocket class provides an SSL encrypted socket for both clients and servers. More... Header: ...

  10. [转] JavaScript 原型理解与创建对象应用

    这段时间把之前的 JavaScript 的笔记复习了一遍,又学习了一些新的内容,所以把自己的学习笔记加上个人理解在这里总结一下,并提供一个简单的应用示例,希望能帮助一些刚入门的朋友.主 要参考< ...