<!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></title>
<style>
#imgContainer
{
width: 990px;
height: 540px;
border: 1px solid red;
/*设置绝对定位,子元素的绝对定位是相对于父元素的*/
position : absolute;
left:10px;
top:10px;
}
#imgContainer img
{
width: 990px;
height: 540px;
position: absolute;
left: 0px;
top: 0px;
}
#imgContainer div
{
position: absolute;
}
#imgContainer .imgTip
{
border: 1px solid blue;
background-color: green;
color:white;
padding: 3px;
width: 10px;
cursor: pointer;
z-index: 100;
bottom: 10px;
}
</style>
<script src=”scripts/jquery-1.7.1.min.js” type=”text/javascript”></script>
<script>
var changeImgId;//自动轮换图片的编号
//定义一个图片集合,指定图片的路径信息
var list = [‘images/1.jpg’,’images/2.jpg’,’images/3.jpg’,’images/4.jpg’,’images/5.jpg’];
$(function () {
$.each(list, function (index) {
//根据数组生成所有的img图片
$(‘<img src=”‘ + this + ‘”/>’)
.appendTo(‘#imgContainer’);
//根据图片生成数字提示
$(‘<div class=”imgTip”>’ + (index + 1) + ‘</div>’)
.css(‘right’, (4 – index) * 20 + ‘px’)
.appendTo(‘#imgContainer’);
});
//设置低1张图片显示
$(‘#imgContainer>img:gt(0)’).hide();
//设置提示数字的事件
$(‘#imgContainer>.imgTip’).hover(function () {
//指向数字
//根据索引找到图片对象
$(‘#imgContainer>img’).eq(parseInt($(this).text()) – 1)
//将指向索引的对应的图片以动画的形式展示出来,
.slideDown(1000)
//将其他图片以动画的形式隐藏
.siblings(‘img’)
.fadeOut(1000);
//设置指向div的背景色
$(this).css(‘background-color’, ‘blue’)
.siblings(‘.imgTip’).css(‘background-color’, ‘green’);
//清除自动播放的计时器
clearInterval(changeImgId);
//更改图片索引
imgIndex = parseInt($(this).text()) – 1;
}, function () {
//移开数字
changeImgId = setInterval(changeImg, 2000);
});
//完成自动切换图片功能
changeImgId = setInterval(changeImg, 2000);
//默认让第一个数字背景为蓝色
$(‘#imgContainer>.imgTip:eq(0)’).css(‘background-color’, ‘blue’);
});
var imgIndex = 0;
//切换图片的代码
function changeImg() {
imgIndex++;
if (imgIndex >= list.length) {
imgIndex = 0;//若果是最后一张,就变成第一张
}
$(‘#imgContainer>img’).eq(imgIndex)
//将指向索引的对应的图片以动画的形式展示出来,
.slideDown(1000)
//将其他图片以动画的形式隐藏
.siblings(‘img’)
.fadeOut(1000);
//将指定的数字索引的div设置背景色
$(‘#imgContainer>.imgTip’).eq(imgIndex)
.css(‘background-color’, ‘blue’)
.siblings(‘.imgTip’).css(‘background-color’, ‘green’);
};
</script>
</head>
<body>
<div id=”imgContainer”></div>
</body>
</html>