<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. Dr.com5.2 for linux

    最近安装了在ubuntu基础上改的elementaryos,很漂亮,学校提供的破linux客户端不能连上,网上常见的也是旧版本. 最后在百度Dr.com贴吧和这个帖子 http://forum.ubu ...

  2. codeforces A. Jeff and Rounding (数学公式+贪心)

    题目链接:http://codeforces.com/contest/351/problem/A 算法思路:2n个整数,一半向上取整,一半向下.我们设2n个整数的小数部分和为sum. ans = |A ...

  3. November 4th Week 45th Friday 2016

    Problems are not stop signs, they are guidelines. 问题不是休止符,而是指向标. Most of the problems can be overcom ...

  4. hdu4348 - To the moon 可持久化线段树 区间修改 离线处理

    法一:暴力! 让干什么就干什么,那么久需要可持久化线段树了. 但是空间好紧.怎么破? 不down标记好了! 每个点维护sum和add两个信息,sum是这段真实的和,add是这段整体加了多少,如果这段区 ...

  5. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. DELPHI TreeView 文件目录树和 设置节点图标 完整

        DELPHI TreeView 文件目录树和 设置节点图标   下载地址 http://download.csdn.net/detail/teststudio/6448293     需要制作 ...

  7. linux下的僵尸进程处理SIGCHLD信号

    什么是僵尸进程? 首先内核会释放终止进程(调用了exit系统调用)所使用的所有存储区,关闭所有打开的文件等,但内核为每一个终止子进程保存了一定量的信息.这些信息至少包括进程ID,进程的终止状态,以及该 ...

  8. 利用Java API通过路径过滤上传多文件至HDFS

    在本地文件上传至HDFS过程中,很多情况下一个目录包含很多个文件,而我们需要对这些文件进行筛选,选出符合我们要求的文件,上传至HDFS.这时就需要我们用到文件模式. 在项目开始前,我们先掌握文件模式 ...

  9. 亲测linux 上安装php

    亲测安装php1.tar zvxf php-5.3.8.tar.gz 2.cd php-5.3.83../configure \ --prefix=/usr/local/php \--with-mys ...

  10. 自己做的萌萌哒的js宠物挂件~

    OwO萌物v1.1 类似wp伪春菜,但纯js不用后端,且可定制程度非常高~,3个人格示例,需要的童鞋自提 仙六 - 越祈 作者:正逍遥0716 2016/5/15 CLANNAD - 藤林杏 作者:正 ...