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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 精彩图片推荐 渐隐渐现

    精彩图片推荐 BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0px; BACKGROUND-COLOR: #f0f8f8 } TD { FONT-SIZE: 12px } A { FONT-SIZE: 12px; LINE-HEIGHT: 18px; TEXT-DECORATION: none } A:hover

  • 一个简单的js渐显(fadeIn)渐隐(fadeOut)类

    一个简单的js渐显(fadeIn)渐隐(fadeOut)类

    要兼容IE(element.style.filter = 'alpha(opacity=value)')和非IE(element.style.opacity=value)就可以了.另,还要注意,非IEopaciy的值是0~1之间,IE是1-100. 下面,贴代码: 复制代码 代码如下: /** * @projectDescription 动画(渐显.渐隐)类 * /** * @projectDescription KINGKIT UI * @date 2010-6-1 * @author Kit

  • 一个不错的渐隐文字效果第1/2页

    我想实现一个,点一下按钮,text里面的文字渐渐消失,换成别的文字后,又渐渐出现的功能. 主要是这个函数 function chgtext() {         hidetext();         ide++;         document.all.title.value=ide;         showtext(); } 点一下执行一次这个函数,可是实现不了,请大家帮忙改一下,谢谢 无标题文档 var col=153; function hidetext() { document.

  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    经常看到网页里图片渐变显示,自己写一个. 原理很简单就是修改元素的css透明度. 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <

  • 有趣的思路~~JS仿 WINXP 注销桌面渐隐效果

    由于以前见很多人的这中仿XP渐隐效果都不是很逼真.我这几天偶然想到了一个思路 ..嘿嘿..很有趣哦 看看大家能看懂不~~应该可以的吧~~HOHO.. 思路概括一句话就是.. 不管整个文档有多长,让body的 滚动条消失,让遮罩层覆盖整个窗体可见区域! 这 '可见'二字非常重要哦!! 只大致的做出来效果..没有很美化它..呵呵.剩下的 timeout 让 遮罩渐变啦什么用的时候再加就好 下面是代码 如果好的话.麻烦斑竹给加加分 .嘿嘿 tks哈 无标题文档 body{margin:0;paddin

  • Js+CSS 文字渐隐渐现显示

    这段代码实现的淡入淡出还算可以吧,比较平滑,同样出自JavaScript+CSS两者的配合. JavaScript文字渐隐渐现显示 0) && (parseInt(navigator.appVersion) >= 4)); var count = 0, count2 = 0, add1 = 3, add2 = 10, timerID; function show() { if (ie4) { count += add1; count2 += add2; delay = 30; if(

  • 非常酷的js图形渐隐导航菜单栏

    body { background:#799AE1; margin:0px; font:normal 12px 宋体; } table { border:0px; } td { font:normal 12px 宋体; } img { vertical-align:bottom; border:0px; } a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; } a:hover { color:#428EFF } .sec_

  • Android自定义View绘图实现渐隐动画

    Android自定义View绘图实现渐隐动画

    实现了一个有趣的小东西:使用自定义View绘图,一边画线,画出的线条渐渐变淡,直到消失.效果如下图所示: 用属性动画或者渐变填充(Shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边渐隐),没在Android中找到现成的API可用.所以,自己做了一个. 基本的想法是这样的: •在View的onTouchEvent中记录触摸点,生成一条一条的线LineElement,放在一个List中.给每个LineElement配置一个Paint实例. •在onDraw中绘制线段. •变换Li

  • jQuery使用fadeout实现元素渐隐效果的方法

    本文实例讲述了jQuery使用fadeout实现元素渐隐效果的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码演示了jQuery控制色块元素逐渐隐藏的效果,可以控制隐藏速度 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $(&quo

  • jquery div提示框渐隐弹出与隐藏效果

    jquery div提示框渐隐弹出与隐藏 *{margin:0;padding:0;font-size:12px;} input{width:120px;height:30px;cursor:pointer;} #note{position:absolute;width:400px;padding:20px;background:#eee;border:1px solid #ccc;left:40%;z-index:9999;display:none;} $(function(){ $('inp

随机推荐