1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style>
6 #imgContainer
7 {
8 width: 990px;
9 height: 540px;
10 border: 1px solid red;
11 /*设置绝对定位，子元素的绝对定位是相对于父元素的*/
12 position : absolute;
13 left:10px;
14 top:10px;
15 }
16 #imgContainer img
17 {
18 width: 990px;
19 height: 540px;
20 position: absolute;
21 left: 0px;
22 top: 0px;
23 }
24 #imgContainer div
25 {
26 position: absolute;
27 }
28 #imgContainer .imgTip
29 {
30 border: 1px solid blue;
31 background-color: green;
32 color:white;
33 padding: 3px;
34 width: 10px;
35 cursor: pointer;
36 z-index: 100;
37 bottom: 10px;
38 }
39 </style>
40 <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
41 <script>
42 var changeImgId;//自动轮换图片的编号
43 //定义一个图片集合，指定图片的路径信息
44 var list = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
45 $(function () {
46 $.each(list, function (index) {
47 //根据数组生成所有的img图片
48 $('<img src="' + this + '"/>')
49 .appendTo('#imgContainer');
50 //根据图片生成数字提示
51 $('<div class="imgTip">' + (index + 1) + '</div>')
52 .css('right', (4 - index) * 20 + 'px')
53 .appendTo('#imgContainer');
54 });
55 //设置低1张图片显示
56 $('#imgContainer>img:gt(0)').hide();
57 //设置提示数字的事件
58 $('#imgContainer>.imgTip').hover(function () {
59 //指向数字
60 //根据索引找到图片对象
61 $('#imgContainer>img').eq(parseInt($(this).text()) - 1)
62 //将指向索引的对应的图片以动画的形式展示出来，
63 .slideDown(1000)
64 //将其他图片以动画的形式隐藏
65 .siblings('img')
66 .fadeOut(1000);
67 //设置指向div的背景色
68 $(this).css('background-color', 'blue')
69 .siblings('.imgTip').css('background-color', 'green');
70 //清除自动播放的计时器
71 clearInterval(changeImgId);
72 //更改图片索引
73 imgIndex = parseInt($(this).text()) - 1;
74 }, function () {
75 //移开数字
76 changeImgId = setInterval(changeImg, 2000);
77 });
78 //完成自动切换图片功能
79 changeImgId = setInterval(changeImg, 2000);
80 //默认让第一个数字背景为蓝色
81 $('#imgContainer>.imgTip:eq(0)').css('background-color', 'blue');
82 });
83 var imgIndex = 0;
84 //切换图片的代码
85 function changeImg() {
86 imgIndex++;
87 if (imgIndex >= list.length) {
88 imgIndex = 0;//若果是最后一张，就变成第一张
89 }
90 $('#imgContainer>img').eq(imgIndex)
91 //将指向索引的对应的图片以动画的形式展示出来，
92 .slideDown(1000)
93 //将其他图片以动画的形式隐藏
94 .siblings('img')
95 .fadeOut(1000);
96 //将指定的数字索引的div设置背景色
97 $('#imgContainer>.imgTip').eq(imgIndex)
98 .css('background-color', 'blue')
99 .siblings('.imgTip').css('background-color', 'green');
100 };
101 </script>
102 </head>
103 <body>
104 <div id="imgContainer"></div>
105 </body>
106 </html>
