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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ padding:0; margin:0;} 8 #slider{ 100%; position:relative; border:0px solid red; height:320px;overflow:hidden; margin:200px auto;} 9 .pic{ 1000px; height:320px; position:absolute; left:50%; margin-left:-500px; border:0px solid red;overflow:-hidden;} 10 .pic ul{ height:330px; border:0px solid red; position: absolute;} 11 .pic ul li{ 1000px; float:left; list-style:none;} 12 .pic img { 1000px; height:320px; border:none; float:left;} 13 14 .bg{-moz-opacity: 0.5;opacity:.50;filter: alpha(opacity=50); cursor: pointer;} 15 .pre{ 100%; height:320px; background:#ccc; position:absolute; left:-50%; margin-left:-500px; z-index:2; text-align: right;} 16 .next{ 100%; height:320px; background:#ccc; position:absolute; left:50%; margin-left:500px; z-index:2;} 17 .hd{ 100%; height:25px; border:0px solid green; position:absolute; bottom:5px; text-align:center; z-index:3;} 18 #hd2{ border:0px solid #fff; height: 25px; line-height: 25px; position: absolute; left: 50%;} 19 #hd2 a{ 25px; height:25px; display:block; margin:0 5px; text-align:center; color:#fff; background:#f60; border-radius: 15px; float:left; text-decoration:none;} 20 #hd2 a.on{ background: #f00; color:#FFCC00;25px; height:25px;display:block;} 21 </style> 22 23 <script type="text/javascript"> 24 window.onload = function (){ 25 var oPic = document.getElementById("sPic"); 26 var aLi = oPic.getElementsByTagName("li"); 27 var oD = document.getElementById("hd2"); 28 var aA = oD.getElementsByTagName("a"); 29 var oPre = document.getElementById("pre"); 30 var oNext = document.getElementById("next"); 31 var iNow = 1; 32 var iSpeed = 100; 33 var timer = null; 34 var timer2 = null; 35 oPic.innerHTML +=oPic.innerHTML; 36 var beginL = -aLi[0].offsetWidth * 2; 37 oPic.style.left = 0; 38 oPic.style.width = aLi[0].offsetWidth * aLi.length + "px"; 39 oD.style.width = 40*aLi.length + "px"; 40 var l =0; 41 var l2; 42 43 44 oNext.onclick = function(){ 45 toNext(); 46 } 47 48 picSpace(); 49 50 //AutomaticSwitching(); 51 52 53 function AutomaticSwitching(){ 54 timer2 = setInterval(function(){ 55 toNext(); 56 },3000); 57 } 58 59 60 61 oPic.onmouseover = oPre.onmouseover = oNext.onmouseover = function(){ 62 clearInterval(timer2); 63 } 64 oPic.onmouseout = oPre.onmouseout = oNext.onmouseout = function(){ 65 //AutomaticSwitching(); 66 } 67 68 69 70 function picSpace(){ 71 for (var i = aLi.length - 1; i > aLi.length - 3; i--) { 72 if (oPic.offsetLeft > -aLi[0].offsetWidth) { 73 aLi[i].style.position = "relative"; 74 aLi[i].style.left = -aLi.length * aLi[0].offsetWidth + "px"; 75 }else{ 76 aLi[i].style.position = ""; 77 aLi[i].style.left = ""; 78 } 79 }; 80 if(iNow > 2 && iNow < aLi.length / 2){ 81 for(var i=0;i<aLi.length;i++){ 82 aLi[i].style.position = ""; 83 aLi[i].style.left = ""; 84 } 85 } 86 } 87 88 function checkNum(vArg){ 89 var nNow = iNow; 90 for (var i = 0; i < aLi.length/2; i++) { 91 aA[i].className = ""; 92 }; 93 if(vArg=="pre"){ 94 nNow -=1; 95 if(nNow > aLi.length / 2 -1){ 96 nNow = nNow - aLi.length/2; 97 } 98 }else{ 99 if(nNow > aLi.length / 2 -1){ 100 nNow = nNow - aLi.length/2; 101 } 102 if (iNow > aLi.length - 1){ 103 nNow = 0; 104 }; 105 } 106 //console.log(nNow); 107 aA[nNow].className = "on"; 108 } 109 110 function toNext(){ 111 checkNum(); 112 if(iNow > aLi.length -1){ 113 iNow = 0; 114 oPic.style.left = aLi[0].offsetWidth + "px"; 115 for(var j=0;j<aLi.length/2;j++){ 116 aLi[j].style.position = ""; 117 aLi[j].style.left = "0"; 118 } 119 } 120 picSpace(); 121 clearInterval(timer); 122 timer = setInterval(function(){ 123 l = oPic.offsetLeft - iSpeed; 124 if(l==-aLi[0].offsetWidth * iNow){ 125 clearInterval(timer); 126 l2 = l; 127 //document.title = iNow + " , " + l; 128 iNow++; 129 if(iNow == aLi.length-1){ 130 for(var j=0;j<aLi.length/2;j++){ 131 //console.log(j); 132 aLi[j].style.position = "relative"; 133 aLi[j].style.left = aLi.length * aLi[0].offsetWidth + "px"; 134 } 135 } 136 } 137 oPic.style.left = l + "px"; 138 //console.log(iNow + " , " + aLi.length + " , " + l + " , " + oPic.style.left + " , " + oPic.offsetLeft + " , " + l2); 139 },50); 140 } 141 142 oPre.onclick = toPre; 143 144 145 function toPre(){ 146 iNow -=1; 147 if(iNow == 0){ 148 iNow = 8; 149 for(var i=0;i<aLi.length;i++){ 150 aLi[i].style.position = ""; 151 aLi[i].style.left = ""; 152 } 153 for(var i=0;i<2;i++){ 154 aLi[i].style.position = "relative"; 155 aLi[i].style.left = aLi.length * aLi[0].offsetWidth + "px"; 156 } 157 oPic.style.left = -aLi.length * aLi[0].offsetWidth + "px"; 158 } 159 if(oPic.offsetLeft > -(aLi.length-1) * aLi[0].offsetWidth){ 160 for(var i=0;i<aLi.length;i++){ 161 aLi[i].style.position = ""; 162 aLi[i].style.left = ""; 163 } 164 } 165 166 clearInterval(timer); 167 timer = setInterval(function(){ 168 checkNum("pre"); 169 l = oPic.offsetLeft + iSpeed; 170 if(l==-(iNow-1) * aLi[0].offsetWidth){ 171 clearInterval(timer); 172 if(iNow < 2){ 173 for(var j=aLi.length/2;j< aLi.length;j++){ 174 aLi[j].style.position = "relative"; 175 aLi[j].style.left = -aLi.length * aLi[0].offsetWidth + "px"; 176 } 177 178 } 179 } 180 oPic.style.left = l + "px"; 181 //console.log(iNow + " , " + aLi.length + " , " + l + " , " + oPic.style.left + " , " + oPic.offsetLeft); 182 },50); 183 } 184 185 for(var i=0;i<aLi.length/2;i++){ 186 var oA = document.createElement("a"); 187 oA.innerHTML = i+1; 188 if(i==0){ 189 oA.className = "on"; 190 } 191 oA.href = "javascript:;"; 192 oD.appendChild(oA); 193 194 aA[i].index = i; 195 196 aA[i].onclick = function(){ 197 //alert(this.index + " , " + iNow); 198 if(iNow <= aLi.length / 2){ 199 if(iNow > this.index){ 200 iNow = this.index + 2; 201 toPre(); 202 }else{ 203 iNow = this.index; 204 checkNum(); 205 toNext(); 206 } 207 } 208 209 /*到这里了 第二屏有点问题*/ 210 if(iNow > aLi.length / 2){ 211 iNow = this.index + aLi.length / 2; 212 toNext(); 213 } 214 console.log("i:" + i + " , index:" + this.index + " , iNow:" + iNow); 215 } 216 } 217 } 218 </script> 219 220 </head> 221 222 <body> 223 224 <div id="slider"> 225 <div class="pic"> 226 <ul id="sPic"> 227 <li><a href=""><img src="http://www.hengqijy.com/uploadfile/2013/1031/20131031084228263.jpg" alt="1" title="1" /></a></li> 228 <li><a href=""><img src="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg" alt="2" title="2" /></a></li> 229 <li><a href=""><img src="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg" alt="3" title="3" /></a></li> 230 <li><a href=""><img src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg" alt="4" title="4" /></a></li> 231 </ul> 232 </div> 233 234 <div class="hd"> 235 <div id="hd2"></div> 236 </div> 237 238 <div class="pre bg" id="pre">pre</div> 239 <div class="next bg" id="next">next</div> 240 241 242 </div> 243 244 </body> 245 </html>