jquery 图片自动切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQUERY实现图片自动切换</title>
<style>
body{margin:0px; padding:0px; font-family:Arial}
ul{list-style:none;margin:0px;padding:0px}
.click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; width:16px; background:#333; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer;_display:inline-block; }
.click_over{margin-left:5px; float:left;text-align:center; height:16px; line-height:16px; width:16px; background:#820000; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer; _display:inline-block; }
</style>
<script language="javascript" src="../Script/jquery-1.4.4.min.js"></script>
</head>
<body>
<div style="height:230px; width:980px; background:#EBEBEB; position:relative" id="flash_outer">
<div style=" position:absolute; left:0px; top:0px; width:980px; height:230px; overflow:hidden" id="flash_pic">
<div style="width:980px; height:250px; background:url(flash_pic/1.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/2.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/3.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/4.jpg)"></div>
</div>
<ul style="position:absolute; right:0px; bottom:0px; height:16px" id="flash_num">
<li class="click_over">1</li>
<li class="click_out">2</li>
<li class="click_out">3</li>
<li class="click_out">4</li>
</ul>
</div>
<script language="javascript">
$(document).ready(function()
{
var len=$("#flash_num>li").length;
var index=1;
var int;
function showSys(num) //图片切换函数
{
$("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");
$("#flash_pic>div").fadeOut().eq(num).fadeIn();
}
function ziDong() //自动切换
{
if(index==len)
{
index=0;
}
showSys(index);
index=index+1;
}
int=setInterval(ziDong,3000);
$("#flash_num>li").click(function() //点击切换
{
var index_num=$("#flash_num>li").index(this);
showSys(index_num);
index=index_num+1; //改变全局变量的值,以便鼠标移开的时候能够衔接上
//$(".click_out").removeClass("click_over").eq(index).addClass("click_over");
//$(".click_out").eq(index).removeClass().addClass("click_over");
//alert(index);
});
$("#flash_outer").mouseover(function() //移动到上面时停止自动切换
{
clearInterval(int);
});
$("#flash_outer").mouseout(function() //移开时继续自动切换
{
int=setInterval(ziDong,3000);
});
});
</script>
</body>
</html>
jquery 图片自动切换的更多相关文章
- jquery背景自动切换特效
查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
- jquery 图片自动无缝滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- jQuery图片自动添加水印插件
JS脚本(jQuery)为图片加水印效果预览:http://hovertree.com/texiao/jquery/94/ 本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置等 ...
- tab切换效果 网站中的图片自动切换
网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...
- jquery图片播放切换插件
点击这里查看效果可自定义数字样式和左右点击按钮 这个更好:移入按钮切换版本 更多图片轮播 以下是HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- 利用JS实现点击按钮后图片自动切换
我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...
- jquery 图片无缝切换
想要和园友分享一下学习jquery的经验.总结,更希望园友提出点建议. 第一次写,有不好的地方请多多见谅! 文笔有限,很多时候不知道怎么来描述,唉.硬伤啊!!那只好多做了,贴代码... ok,废话少说 ...
随机推荐
- [CC-CHEFGRPH]Time to Study Graphs with Chef
[CC-CHEFGRPH]Time to Study Graphs with Chef 题目大意: 一个有向图可以分成\(n+2(n\le10^{12})\)层,第\(0\)层和第\(n+1\)层有\ ...
- bzoj 1009: [HNOI2008]GT考试 -- KMP+矩阵
1009: [HNOI2008]GT考试 Time Limit: 1 Sec Memory Limit: 162 MB Description 阿申准备报名参加GT考试,准考证号为N位数X1X2.. ...
- AOP流程分析
1. 注册AnnotationAwareAspectJAutoProxyCreator @EnableAspectJAutoProxy --> @Import(AspectJAutoProxyR ...
- git提交时”warning: LF will be replaced by CRLF“提示
今天把项目做完之后,然后用Git准备提交代码的时候,遇到warning: LF will be replaced by CRLF警告. 当时在网上查了资料,发现很多的解决办法都是:修改git全局配置, ...
- git -- git clone
git clone 命令参数: usage: git clone [options] [--] <repo> [<dir>] -v, --verbose be more ver ...
- Dual-polarity supply provides ±12V from one IC
LT1961 升压型稳压器造就了兼具升压和降压能力的扁平状SEPIC Transformerless dc/dc converter produces bipolar outputs Well-reg ...
- 我的jlink破解失败经历
http://fallenwind.spaces.eepw.com.cn/articles/article/item/59116 标题:我的jlink破解失败经历2009-07-12 01:16:56 ...
- VC中__int64的用法
VCVC6.0的64位整数分别叫做__int64与unsigned __int64,其范围分别是[-2^63, 2^63)与[0,2^64),即-922337203685 4775808~922337 ...
- cocos2dx 3.0研究(1)-- hello world程序
1. 在mac上构建hello world很easy ./setup.py source /Users/jiangxf/.bash_profile cocos new AliGame -p com.m ...
- L脚本语言语法手冊 0.10版
L脚本语言语法手冊 0.10版 简 介 L脚本语言是一个轻量级的,旨在接近自然语言的编程语言,眼下支持在中文.英文基础上的编程.并可扩展为随意语种.L脚本语言的语法结构简单.程序结构相对 ...