jquery漸隱漸顯的圖片幻燈閃爍切換實現(xiàn)方法

更新時間：2015年02月26日 10:50:09 作者：代碼家園

這篇文章主要介紹了jquery漸隱漸顯的圖片幻燈閃爍切換實現(xiàn)方法,實例分析了jQuery操作圖片的技巧及鼠標(biāo)事件用法,需要的朋友可以參考下

本文實例講述了jquery漸隱漸顯的圖片幻燈閃爍切換實現(xiàn)方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<!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;

 //插入圖片索引數(shù)字

 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');

 //劃過數(shù)字

 _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>

預(yù)覽效果時左下角會提示錯誤，而且看不到效果，刷新一下就可以看到效果了；當(dāng)然，在實際使用中，不會出現(xiàn)這樣的問題。<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>