<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. hdoj 2524 矩形A + B【递推】

    矩形A + B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  2. hdu 1015 dfs

    Problem Description === Op tech briefing, 2002/11/02 06:42 CST === "The item is locked in a Kle ...

  3. ifndef系列

    文件中的#ifndef 头件的中的#ifndef,这是一个很关键的东西.比如你有两个C文件,这两个C文件都include了同一个头文件.而编译时,这两个C文件要一同编译成一个可运行文件,于是问题来了, ...

  4. json字符串、json对象、数组 三者之间的转换

    json字符串转化成json对象 // jquery的方法 var jsonObj = $.parseJSON(jsonStr) //js 的方法 var jsonObj = JSON.parse(j ...

  5. JS方法在iframe父子窗口间的调用

    本文向大家简单介绍一下iframe父子窗口间JS方法调用,JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用,希望本文介绍对你有所帮助. if ...

  6. C# WinForm 判断窗体控件是否修改过

    本文转载:http://www.cnblogs.com/LinFx/archive/2011/12/23/2299895.html 1.自定义控件, 和接口 ) return IsModify(con ...

  7. Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable 这里讲一下如何实现PS调色板中的透明度 ...

  8. Android 颜色渲染(五) LinearGradient线性渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色处理(五) LinearGradient线性渲染 相信很多人都看过歌词同步的效果, 一是竖直方向的滚动,另一方面是水平方面的歌 ...

  9. location.href的用户总结

    *.location.href 使用方法: top.location.href="url"          在顶层页面打开url(跳出框架) self.location.href ...

  10. 全面分析 Spring 的编程式事务管理及声明式事务管理--转

    开始之前 关于本教程 本教程将深入讲解 Spring 简单而强大的事务管理功能,包括编程式事务和声明式事务.通过对本教程的学习,您将能够理解 Spring 事务管理的本质,并灵活运用之. 先决条件 本 ...