jquery渐隐渐显的图片幻灯闪烁切换实现方法


Posted in Javascript onFebruary 26, 2015

本文实例讲述了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>

<title>jQuery渐隐渐显的图片幻灯闪烁切换效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

body{font-size:12px;letter-spacing:1px;font-family:"Microsoft YaHei";line-height:1.8em;}

div,ul,li{margin:0;padding:0;}

.slides{position:relative;width:700px;height:300px;overflow:hidden;border:1px solid #ccc;}

.slides img{width:700px; height:300px;}

.slides .ico{position:absolute; right:8px;bottom:6px;}

.slides .ico li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid #cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:pointer;}

.slides .ico li.high{background:#7f0019;color:#fff;font-weight:bolder;}

</style>

<script language="javascript" src="js/jquery-1.4.2.min.js"></script>

<script language="javascript">

$(function(){

 var _img=$('.slides img');

 var _len=_img.length;

 var _index=0;

 var _moving;

 //插入图片索引数字

 var _ul='<ul>'

 for(var i=1; i<=_len; i++){

  _ul=_ul+'<li>'+i+'</li>';

 }

 _ul=_ul+'</ul>';

 $('div.ico').append(_ul);

 var _ico=$('.ico li');

 //划过数字

 _ico.mouseover(function(){

  _index=_ico.index(this);

  _img.filter(':visible').fadeOut(300,function(){

   _img.eq(_index).fadeIn(300);

  })

  $(this).addClass('high').siblings().removeClass('high');

 }).eq(0).mouseover();

 //自动渐变

 _moving=setInterval(autoShow,2000);

 _img.hover(function(){clearInterval(_moving)},function(){

  _moving=setInterval(autoShow,2000);

 })

 function autoShow(){

  _index++;

  if(_index==_len) _index=0;

  _ico.eq(_index).trigger('mouseover');

 };

});

</script>

</head>

<body>

预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>

<!--把下面代码加到<body>与</body>之间-->

<div class="slides">

 <img src="/images/m02.jpg" title="demo" alt="demo">

 <img src="/images/m01.jpg" title="demo" alt="demo">

 <img src="/images/m03.jpg" title="demo" alt="demo">

 <img src="/images/m04.jpg" title="demo" alt="demo">

 <img src="/images/m05.jpg" title="demo" alt="demo">

 <div class="ico"></div>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
js 操作符实例代码
Oct 24 Javascript
Javascript中的delete介绍
Sep 02 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
2则自己编写的jQuery特效分享
Feb 26 #Javascript
javascript制作网页图片上实现下雨效果
Feb 26 #Javascript
js实现格式化金额,字符,时间的方法
Feb 26 #Javascript
如何减少浏览器的reflow和repaint
Feb 26 #Javascript
详谈javascript中DOM的基本属性
Feb 26 #Javascript
jqueryUI里拖拽排序示例分析
Feb 26 #Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 #Javascript
You might like
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python 文件数据读写的具体实现
2020/01/24 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
大学生自我评价范文分享
2014/02/21 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
工作年限证明模板
2014/11/01 职场文书
先进基层党组织材料
2014/12/25 职场文书
个人欠条范本
2015/07/03 职场文书
检举信的写法
2019/04/10 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android