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