图片自动变换：
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>