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>