<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. openstack 控制节点大流量对外发包,nf_conntrack,table full droping packets

    某些人很MJJ,挂了N多代理来疯狂采集,把服务器带宽都耗尽了,没办法只好封掉一些! 目前发现的问题openStack kilo for ubuntu manuual运行一段时间后 云平台的控制节点p5 ...

  2. Struct.xml Action配置

    <package name="default" namespace="/" extends="struts-default"> ...

  3. Git命令详解（一）-个人使用

    本文暂时不会涉及到团队如何使用Git的内容,而是从个人的角度探讨如何用好Git. 约定 绿色的5位字符表示提交的ID,文中用<commit>表示,分别指向父节点.分支用橘色显示,分别指向特 ...

  4. php异步请求模拟多进程

    在A请求页面发起另一个B页面请求 不需要等待B页面执行结束再返回 直接往下执行A页面的请求 A页面代码 <?php $url = 'http://'.$_SERVER['HTTP_HOST']. ...

  5. Android 官方命令深入分析

    原文:www.libgdx.cn Android SDK包括了多种工具来帮助你创建基于Android平台的移动应用.这些工具一般分成两类:SDK 工具和 platform 工具. SDK 工具是独立的 ...

  6. 初步掌握HDFS的架构及原理

    目录 HDFS 是做什么的 HDFS 从何而来 为什么选择 HDFS 存储数据 HDFS 如何存储数据 HDFS 如何读取文件 HDFS 如何写入文件 HDFS 副本存放策略 Hadoop2.x新特性 ...

  7. （转载）linux那点事儿（中）

    原文地址:http://www.cnblogs.com/fnng/archive/2012/03/19/2407162.html 本文只是转载供自己学习之用 2012-03-22 13:31 by 虫 ...

  8. [转] 一个资深iOS开发者对于React Native的看法

    当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...

  9. WKWebView使用过程中的那些坑

    问题产生背景: 新开发的页面中有一部分的界面是需要展示后端接口返回的HTML代码,包括文字和图片.所以就自然而然的要使用iOS原生的WebKit. 鉴于Xcode 8发布以后,编译器支持的最低版本(D ...

  10. 如何自定义echarts主题

    上一篇,选择echarts原有的主题样式,那么如何自定义自己的主题 与选择原有主题类似 1.echarts官网地址http://echarts.baidu.com/echarts2/doc  在工具中 ...