<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. 《A First Course in Probability》-chaper7-极限定理-强大数定理

    在现实问题中我们对于一个实验往往会重复成千上万次,那么我们就需要关注在实验次数趋于无穷之后,整个实验的期望会趋于怎样一个结果.其实这一章“极限定理”都是在处理这个问题. 强大数定理: 这里的证明过程给 ...

  2. Just a Hook

      Just a Hook 题目大意:原来有N个铜棍, 一个人有种能力可以把一个区间的棍变成铜,银或者金的,价值分别是1,2,3, 最后求出总价值,没啥好说的,赤裸裸的线段树: Time Limit ...

  3. mac svn命令

    转载:Mac下svn command命令 svn help command  获取子命令说明 svn info $URL 查看工作空间信息 svn list   显示当前目录下svn记录文件列表,不访 ...

  4. ADO.NET对象模型

    ADO.NET建立在NetFramwork一些核心类的基础之上,可以将这些类分为两组:用于包含于管理数据的容器类与用于连接特定数据源的控制类. 容器类是通用的,无论使用什么样的数据源,都可以使用相同的 ...

  5. HDU-4041-Eliminate Witches! （11年北京网络赛！！）

    Eliminate Witches! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  6. [CodeForce]358D Dima and Hares

    有N<3000只宠物要喂,每次只能喂一只,每喂一只宠物,宠物的满足度取决于: 1 紧靠的两个邻居都没喂,a[i] 2 邻居中有一个喂过了,b[i] 3 两个邻居都喂过了,c[i] 把所有宠物喂一 ...

  7. Cocos2d-x游戏开发中的消息机制：CCNotificationCenter的使用

    在HTML5游戏开发中,js可以使用Event对象的addEventListener(添加事件监听).dispatchEvent(触发事件)实现监听机制,如果在coocos2d-x中,去实现这种机制该 ...

  8. 关于Sublime Text3 pyV8无法加载的问题

    昨天切换到sublime text 3  安装 emmet插件 不起作用  提示  pyv8 无法加载 手动下载安装解决 问题描述 PyV8 Binaries Archive of pre-compi ...

  9. Android Studio安装及首次运行遇到的问题

    Android Studio,下载地址:http://developer.android.com/sdk/index.html.需要注意的是Android Studio需要JDK 1.7+才可以安装, ...

  10. Codeforces 231E - Cactus

    231E - Cactus 给一个10^5个点的无向图,每个点最多属于一个环,规定两点之间的简单路:从起点到终点,经过的边不重复 给10^5个询问,每个询问两个点,问这两个点之间有多少条简单路. 挺综 ...