图片自动变换

图片自动变换：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <title>图片变换</title>
  5 <style>
  6 body, ul{
  7     margin: 0;
  8     padding: 0;
  9 }
 10 #box{
 11     width: 490px;
 12     height: 170px;
 13     overflow: hidden;
 14     margin: 10px auto;
 15     position: relative;
 16 }
 17 .imglist li {
 18     position: absolute;
 19 }
 20 ul{
 21     list-style-type: none;
 22 }
 23 .numlist{
 24     position: absolute;
 25     z-index: 1000;
 26     right: 0;
 27     bottom: 0;
 28 }
 29 
 30 .numlist li{
 31     padding: 1px 6px;
 32     float: left;
 33     background: #f80;
 34     margin:2px 3px;
 35     color: #fff;
 36     border-radius: 20px;
 37     cursor: pointer;
 38 }
 39 </style>
 40 </head>
 41 <body>
 42 <div id="box">
 43 </div>
 44 <script>
 45 function slide(box){
 46     if(window == this) return new slide(box);
 47     this.box = document.getElementById(box);
 48 }
 49 
 50 slide.prototype = {
 51     init: function(){
 52         var imgList = document.createElement('ul'), numList = document.createElement('ul');
 53         imgList.className = "imglist";
 54         numList.className = "numlist";
 55         this.index = 0;
 56         this.box.appendChild(imgList);
 57         this.box.appendChild(numList);
 58         var imgs = [
 59             "img/1.png",
 60             "img/2.jpg",
 61             "img/3.jpg",
 62             "img/4.png",
 63             "img/5.jpg"
 64         ];
 65         var len = this.len = imgs.length;
 66         for(var i = 0; i < len; i++){
 67             var li = document.createElement('li');
 68             var img = document.createElement('img');
 69             img.src = imgs[i];
 70             li.appendChild(img);
 71             li.style.opacity = 0;
 72             li.style.filter = "alpha(opacity = 0)";
 73             imgList.appendChild(li);
 74         }
 75         for(var i = 0; i < len; i++){
 76             var li = document.createElement('li');
 77             li.innerHTML = i+1;
 78             numList.appendChild(li);
 79         }
 80         this.imgs = imgList.getElementsByTagName('li');
 81         this.nums = numList.getElementsByTagName('li');
 82         return this;
 83     },
 84     anim: function(i, j){
 85         i = i % this.len, j = j % this.len;
 86         var pel = this.imgs[i], cel = this.imgs[j], numel = this.nums[j];
 87         numel.style.fontWeight = "bold";
 88         numel.style.background = "#f20";
 89         pel.style.opacity = 1;
 90         pel.style.filter = "alpha(opacity = " + 100 + ")";
 91         this.fade(pel, cel, numel);
 92         this.index++;
 93         var self = this;
 94         setTimeout(function(){
 95             self.anim(++i,++j);
 96         }, 3000);
 97     },
 98     fade: function(pel, cel, numel){
 99         var m = 0;
100         var timer = setInterval(function(){
101             if(m < 100){
102                 m++;
103                 pel.style.opacity = 1 - m/100;
104                 pel.style.filter = "alpha(opacity = " + (100 - m) + ")";
105                 cel.style.opacity = m/100;
106                 cel.style.filter = "alpha(opacity = " + m + ")";
107             }else{
108                 setTimeout(function(){
109                     numel.style.fontWeight = "normal";
110                     numel.style.background = "#f80";
111                 }, 1500);
112                 clearInterval(timer);
113             }
114         }, 15);
115     }
116 };
117 var d = slide("box").init();
118 d.anim(4, 0);
119 </script>
120 </body>
121 </html>

 

posted on 2015-05-03 11:19  风吹树叶黄  阅读(141)  评论(0)  编辑  收藏  举报

导航