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 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
javascript类型转换使用方法
Feb 08 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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自动更新新闻DIY
2006/10/09 PHP
mysql 字段类型说明
2007/04/27 PHP
php流量统计功能的实现代码
2012/09/29 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
phpinfo的知识点总结
2019/10/10 PHP
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
python自动发送邮件脚本
2018/06/20 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
weblogic面试题
2016/03/07 面试题
《纸船和风筝》教学反思
2014/02/15 职场文书
讲党性心得体会
2014/09/03 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
go xorm框架的使用
2021/05/22 Golang
解析原生JS getComputedStyle
2021/05/25 Javascript