jQuery 简单特效之 ---- jQuery 实现包含淡入效果的简单图片库

来源：互联网发布：互动投影软件1.1 编辑：程序博客网时间：2024/04/30 16:01

HTML文件代码如下（包含js代码)

<!DOCTYPE html> <html> <head> <title> </title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="test_10.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">

$(document).ready( function(){//每一次单击链接，会使class = advanced 的元素滑动收起/滑动弹出$('.advanced-search').bind('click',function(){$('.advanced').slideToggle();});//建立淡出效果的图片库  //存放所有图片的名字  var slideArray = [  "p-1.jpg",  "p-2.jpg",  "p-3.jpg",  "p-4.jpg"  ];  //文件地址  var imgDir = "images/p-";    //新添加元素.slide-image来存放稍后添加的图片  $('.container').append('<div class="slide-image"</div>');  //在slide-image中放入一个图片  //$('.slide-image').html('<img src="images/ ' + slideArray[0] +' "/>');  //在slide-image后添加div nav 用做导航  $('.slide-image').after('<ul id="nav"></ul>');  //取出slideArray的元素个数  var sildeLength = slideArray.length;  //建立for循环，迭代处理slideArray中的每一项， 循环slideLength次  for( i=0; i<sildeLength; i++ ){  var slideTest = i+1;  $('#nav').append('<li> <a href="#" rel="'+slideTest+'"> '+slideTest + '</a></li>');  }  //为li中每个a标签添加click事件  为slide-image元素设置图片链接  $('#nav li a').bind('click',function(){  var numSlide = $(this).attr('rel');  $('.slide-image').html('<img src="'+imgDir+numSlide+'.jpg"/>');  $('.slide-image img').fadeIn();  //设置淡入效果  //$('#nav li a').removeClass('active');  //$(this).addClass('active');  });  //为保证页面加载完成时显示第一张照片，主动触发一次click  $('#nav li a').eq(0).click(); });</script>

</head> <body>

<div class="container"><h1> jQuery Inmages Galore</h1></div>

</body> </html>

CSS文件代码如下

body{ font-family: arial; }

ul #nav{ list-style-type:none; margin: 10px 0 10px; padding: 0; }

ul #nav li{ float: left; width: 30px; }

ul #nav li a.active{ background:#B4F114; }

.slide-image{ width: 300px; height: 400px; border: 2px solid #05609A; overflow: hidden; }

.slide-image img{ display: none; }

### 通过点击下方的序号切换图片，通过改变的代码中的slideArray中的图片来改变图片库显示的图片

0 0

jQuery 简单特效之 ---- jQuery 实现包含淡入效果的简单图片库

HTML文件代码如下 （包含js代码)

CSS文件代码如下

HTML文件代码如下（包含js代码)