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{ width:100%; position:relative; border:0px solid red; height:320px;overflow:hidden; margin:200px auto;}
9 .pic{ width: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{ width:1000px; float:left; list-style:none;}
12 .pic img { width:1000px; height:320px; border:none; float:left;}
13
14 .bg{-moz-opacity: 0.5;opacity:.50;filter: alpha(opacity=50); cursor: pointer;}
15 .pre{ width:100%; height:320px; background:#ccc; position:absolute; left:-50%; margin-left:-500px; z-index:2; text-align: right;}
16 .next{ width:100%; height:320px; background:#ccc; position:absolute; left:50%; margin-left:500px; z-index:2;}
17 .hd{ width: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{ width: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;width: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 oPic.innerHTML +=oPic.innerHTML;
35 var beginL = -aLi[0].offsetWidth * 2;
36 oPic.style.left = 0;
37 oPic.style.width = aLi[0].offsetWidth * aLi.length + "px";
38 oD.style.width = 40*aLi.length + "px";
39 var l =0;
40 var l2;
41
42 oNext.onclick = function(){
43 toNext();
44 }
45
46 picSpace();
47
48 function picSpace(){
49 for (var i = aLi.length - 1; i > aLi.length - 3; i--) {
50 if (oPic.offsetLeft > -aLi[0].offsetWidth) {
51 aLi[i].style.position = "relative";
52 aLi[i].style.left = -aLi.length * aLi[0].offsetWidth + "px";
53 }else{
54 aLi[i].style.position = "";
55 aLi[i].style.left = "";
56 }
57 };
58 }
59
60 function checkNum(vArg){
61 var nNow = iNow;
62 for (var i = 0; i < aLi.length/2; i++) {
63 aA[i].className = "";
64 };
65 if(vArg=="pre"){
66 nNow -=1;
67 if(nNow > aLi.length / 2 -1){
68 nNow = nNow - aLi.length/2;
69 }
70 }else{
71 if(nNow > aLi.length / 2 -1){
72 nNow = nNow - aLi.length/2;
73 }
74 if (iNow > aLi.length - 1){
75 nNow = 0;
76 };
77 }
78 //console.log(nNow);
79 aA[nNow].className = "on";
80 }
81
82 function toNext(){
83 checkNum();
84 if(iNow > aLi.length -1){
85 iNow = 0;
86 oPic.style.left = aLi[0].offsetWidth + "px";
87 for(var j=0;j<aLi.length/2;j++){
88 aLi[j].style.position = "";
89 aLi[j].style.left = "0";
90 }
91 }
92 picSpace();
93 clearInterval(timer);
94 timer = setInterval(function(){
95 l = oPic.offsetLeft - iSpeed;
96 if(l==-aLi[0].offsetWidth * iNow){
97 clearInterval(timer);
98 l2 = l;
99 //document.title = iNow + " , " + l;
100 iNow++;
101 if(iNow == aLi.length-1){
102 for(var j=0;j<aLi.length/2;j++){
103 //console.log(j);
104 aLi[j].style.position = "relative";
105 aLi[j].style.left = aLi.length * aLi[0].offsetWidth + "px";
106 }
107 }
108 }
109 oPic.style.left = l + "px";
110 //console.log(iNow + " , " + aLi.length + " , " + l + " , " + oPic.style.left + " , " + oPic.offsetLeft + " , " + l2);
111 },50);
112 }
113
114 oPre.onclick = toPre;
115
116
117 function toPre(){
118 iNow -=1;
119 if(iNow == 0){
120 iNow = 8;
121 for(var i=0;i<aLi.length;i++){
122 aLi[i].style.position = "";
123 aLi[i].style.left = "";
124 }
125 for(var i=0;i<2;i++){
126 aLi[i].style.position = "relative";
127 aLi[i].style.left = aLi.length * aLi[0].offsetWidth + "px";
128 }
129 oPic.style.left = -aLi.length * aLi[0].offsetWidth + "px";
130 }
131 if(oPic.offsetLeft > -(aLi.length-1) * aLi[0].offsetWidth){
132 for(var i=0;i<aLi.length;i++){
133 aLi[i].style.position = "";
134 aLi[i].style.left = "";
135 }
136 }
137
138 clearInterval(timer);
139 timer = setInterval(function(){
140 checkNum("pre");
141 l = oPic.offsetLeft + iSpeed;
142 if(l==-(iNow-1) * aLi[0].offsetWidth){
143 clearInterval(timer);
144 if(iNow < 2){
145 for(var j=aLi.length/2;j< aLi.length;j++){
146 aLi[j].style.position = "relative";
147 aLi[j].style.left = -aLi.length * aLi[0].offsetWidth + "px";
148 }
149
150 }
151 }
152 oPic.style.left = l + "px";
153 //console.log(iNow + " , " + aLi.length + " , " + l + " , " + oPic.style.left + " , " + oPic.offsetLeft);
154 },50);
155 }
156
157 for(var i=0;i<aLi.length/2;i++){
158 var oA = document.createElement("a");
159 oA.innerHTML = i+1;
160 if(i==0){
161 oA.className = "on";
162 }
163 oA.href = "javascript:;";
164 oD.appendChild(oA);
165
166 aA[i].index = i;
167
168 aA[i].onclick = function(){
169 console.log("i:" + i + " , index:" + this.index + " , iNow:" + iNow);
170 }
171 }
172 }
173 </script>
174
175 </head>
176
177 <body>
178
179 <div id="slider">
180 <div class="pic">
181 <ul id="sPic">
182 <li><a href=""><img src="http://www.hengqijy.com/uploadfile/2013/1031/20131031084228263.jpg" alt="1" title="1" /></a></li>
183 <li><a href=""><img src="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg" alt="2" title="2" /></a></li>
184 <li><a href=""><img src="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg" alt="3" title="3" /></a></li>
185 <li><a href=""><img src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg" alt="4" title="4" /></a></li>
186 </ul>
187 </div>
188
189 <div class="hd">
190 <div id="hd2"></div>
191 </div>
192
193 <div class="pre bg" id="pre">pre</div>
194 <div class="next bg" id="next">next</div>
195
196
197 </div>
198
199 </body>
200 </html>
