淡入淡出效果的图片库
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
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{text-decoration:none; background:#05609a; color:#fff; padding:5px;}
ul#nav li a.active{background:#b4f114;}
.slide-image{width:400px; height:300px; border:2px solid #05609a; overflow:hidden;}
.slide-image img{display:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var slideArray=["ansel_adams1.jpg","ansel_adams2.jpg","ansel_adams3.jpg","ansel_adams4.jpg","ansel_adams5.jpg"];
//var imgDir='images/ansel_adams'; //保存图片的所在目录；
$('.container').append('<div class="slide-image"></div>'); //在容器内添加图库
$('.slide-image').html('<img src="images/'+slideArray[0]+'"/>'); //在图库中放入一张图片
$('.slide-image').after('<ul id="nav"></ul>'); //添加无序类表，用在导航；
var slideLength=slideArray.length;
for(i=0;i<slideLength;i++){
var slideText=i+1; //为循环变量加1，确保链接文本是从1到5；
$('#nav').append('<li><a href="#" rel="'+slideText+'">'+slideText+'</a></li>'); //为数组中的图片生成一个li元素并追加到nav中；
$('#nav li a').bind('mouseover',function(){ //为每一个链接元素绑定click事件；
var munSlide=$(this).text();
$('.slide-image').html('<img src="images/ansel_adams'+munSlide+'.jpg"/>');//插入一个图片，拼出正确的src属性；
$('.slide-image img').fadeIn();
$('#nav li a').removeClass('active');
$(this).addClass('active');
})
$('#nav li a').eq(0).mouseover();
}
})
</script>
</head>
<body>
<div class="container">
<h1>jQuery Images Galore</h1>
</div>
</body>
</html>
浙公网安备 33010602011771号