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

前端技术 2023/09/05 JavaScript

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

本文地址：https://www.stayed.cn/item/12807

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案