Jquery的动态切换图片 

  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>
View Code

 

posted @ 2018-03-19 23:09  Jason's_Blog  阅读(156)  评论(0)    收藏  举报