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事件绑定.on()简要概述及应用
Feb 07 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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数据库抽象层 PDO
2011/05/07 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
php curl基本操作详解
2013/07/23 PHP
php-fpm配置详解
2014/02/12 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
可实现多表单提交的javascript函数
2007/08/01 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
js变换显示图片的实例
2013/04/16 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
python爬取网页转换为PDF文件
2018/06/07 Python
python分数表示方式和写法
2019/06/26 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
SQL Server数据库笔试题和答案
2016/02/04 面试题
高中自我鉴定
2013/12/20 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
学历公证委托书
2014/04/09 职场文书
计算机软件专业求职信
2014/06/10 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
Golang jwt身份认证
2022/04/20 Golang