待续...

  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>