图片切换实例 - 喵小娇

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         body,ul,li,p{margin: 0; padding: 0}
  8         li{list-style: none;}
  9         body{background: darkslategray;}
 10         #box {
 11             width: 312px;
 12             height: 410px;
 13             margin: 50px auto;
 14             position: relative;
 15             overflow: hidden;
 16             border-radius: 8px;
 17         }
 18 
 19         #bigBox{
 20             width: 100%;
 21             background-image: url("../img/1.jpg");
 22             background-size: 100% 100%;
 23             position: absolute;
 24             z-index: 1;
 25         }
 26 
 27         .left{
 28             width: 50%;
 29             height: 300px;
 30             float: left;
 31             z-index: 2;
 32             background: rgba(255,0,0,0);
 33         }
 34 
 35         .right{
 36             width: 50%;
 37             height: 300px;
 38             float: left;
 39             z-index: 2;
 40             background: rgba(0,255,255,0);
 41         }
 42 
 43         #prev,#next{
 44             width: 40px;
 45             height: 40px;
 46             font-size: 26px;
 47             border-radius: 8px;
 48             color: black;
 49             background: #fff;
 50             filter: alpha(opacity:0);
 51             opacity:0;
 52             text-align: center;
 53             position: absolute;
 54             top:40%;
 55             z-index: 3;
 56         }
 57         #prev{left: 1%;}
 58         #next{right: 1%;}
 59 
 60         .bottom{
 61             width: 100%;
 62             background: rgba(0,0,0,0.6);
 63             position: absolute;
 64             bottom: 0;
 65         }
 66 
 67         .bottom p{
 68             width: 50%;
 69             line-height: 30px;
 70             float: left;
 71             text-align: center;
 72             color: #fff;
 73         }
 74 
 75         #smallBox{
 76             height: 110px;
 77             position: absolute;
 78             bottom: 0;
 79         }
 80 
 81         #smallBox li {
 82             width: 100px;
 83             height: 100px;
 84             float: left;
 85             background-size: 100%;
 86             filter: alpha(opacity:30);
 87             opacity:0.3;
 88             border: 2px solid #cdcdcd;
 89         }
 90 
 91         #smallBox .active{
 92             filter: alpha(opacity:100);
 93             opacity:1;
 94         }
 95 
 96     </style>
 97 
 98     <script>
 99         window.onload=function () {
100             var oBigBox=document.getElementById('bigBox');
101             var oBigBoxLeft=document.getElementsByClassName('left')[0];
102             var oBigBoxRight=document.getElementsByClassName('right')[0];
103             var oBtnPrev=document.getElementById('prev');
104             var oBtnNext=document.getElementById('next');
105             var oSmallBox=document.getElementById('smallBox');
106             var oText=document.getElementsByClassName('text')[0];
107             var oNumber=document.getElementsByClassName('munber')[0];
108 
109             /*------------------------初始化------------------------------------------*/
110             var arrText=['图一','图二','图三','图四','图五','图六','图七','图八'];
111             for(var i=0;i<arrText.length;i++){
112                 var aLi=document.createElement('li');
113                 oSmallBox.appendChild(aLi);
114                 aLi.index=i;
115                 aLi.style.backgroundImage='url(../img/'+(aLi.index+1)+'.jpg)';
116             }
117             var aLi=document.getElementsByTagName('li');
118             oSmallBox.style.width=aLi.length*(oBigBox.offsetWidth/3)+'px';
119             var num=1;
120             aLi[0].className='active';
121             oText.innerHTML=arrText[num-1];
122             oNumber.innerHTML=num+'/'+arrText.length;
123 
124 
125             /*------------------------左右按钮显示隐藏-----------------------------------*/
126             oBigBoxLeft.onmouseover=function () {
127                 startMove1(oBtnPrev,'opacity', 100);
128             }
129             oBigBoxLeft.onmouseout=function () {
130                 startMove1(oBtnPrev,'opacity', 0);
131             }
132 
133             oBigBoxRight.onmouseover=function () {
134                 startMove1(oBtnNext,'opacity', 100);
135             }
136             oBigBoxRight.onmouseout=function () {
137                 startMove1(oBtnNext,'opacity', 0);
138             }
139 
140 
141             /*------------------------左右按钮控制翻页-----------------------------------*/
142             oBtnPrev.onclick=function () {
143                 PrevNext('prev',0);
144                 startMove1(oBigBox,'opacity',100);
145             }
146             oBtnNext.onclick=function () {
147                 PrevNext('next',0);
148                 startMove1(oBigBox,'opacity',100);
149             }
150 
151 
152             /*------------------------点击控制翻页-----------------------------------*/
153             for(var i=0;i<arrText.length;i++){
154                 aLi.index=i;
155                 aLi[i].onclick=function () {
156                     var that=this.index+1;
157                     PrevNext('click',(this.index+1));
158                     startMove1(oBigBox,'opacity',100);
159                 }
160             }
161 
162 
163             /*------------------------封装函数-----------------------------------*/
164             function PrevNext(a,that) {
165                 oBigBox.style.filter='alpha(opacity:0)';
166                 oBigBox.style.opacity='0';
167                 for(var i=0;i<aLi.length;i++){
168                     aLi[i].className='';
169                 }
170                 var Turn=0;
171 
172                 switch (a){
173                     case 'next':
174                         num<arrText.length?num++: alert('已经是最后一张');
175                         Turn=num!=aLi.length?num-2:num-3;
176                         break;
177 
178                     case 'prev':
179                         num!=1?num--:alert('已经是第一张啦');
180                         Turn=num!=1?num-2:0;
181                         break;
182 
183                     case 'click':
184                         num=that;
185                         if(num!=aLi.length&&num!=1){
186                             Turn=num-2;
187                         }else if(num==aLi.length){
188                             Turn=num-3;
189                         }else if(num==1){
190                             Turn=0;
191                         }
192                         break;
193                 }
194                 oBigBox.style.backgroundImage='url(../img/'+num+'.jpg)';
195                 aLi[num-1].className='active';
196                 oText.innerHTML=arrText[num-1];
197                 oNumber.innerHTML=num+'/'+arrText.length;
198                 oSmallBox.style.left=-(aLi[1].offsetLeft* Turn)+'px';
199             }
200             function startMove1(obj,attr,target,fn) {
201                 clearInterval(obj.timer);//指定关掉上一个div的定时器
202                 obj.timer=setInterval(function () {
203                     //1.取当前的值
204                     var iCur=0;
205                     if(attr=='opacity'){
206                         iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
207                     }else {
208                         iCur=parseInt(getStyle(obj,attr));
209                     }
210 
211                     //2.算速度
212                     var speed=(target-iCur)/5;
213                     speed=speed>0?Math.ceil(speed):Math.floor(speed);
214 
215                     //3.检测停止
216                     if(iCur==target){
217                         clearInterval(obj.timer);
218 
219                         if(fn){
220                             fn();
221                         }
222 
223                     }else {
224                         if(attr=='opacity'){
225                             obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
226                             obj.style.opacity=(iCur+speed)/100;
227                         }else {
228                             obj.style[attr]=iCur+speed+'px';
229                         }
230                     }
231                 },30)
232             } //对象，属性，目标点
233             function getStyle(obj,attr) {
234                 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
235             }
236         }
237     </script>
238 </head>
239 <body>
240 <div id="box">
241     <div id="bigBox">
242         <div class="left"><a id="prev" href="#">&lt;</a></div>
243         <div class="right"><a id="next" href="#">&gt;</a></div>
244         <div class="bottom">
245             <p class="text"></p> <p class="munber"></p>
246         </div>
247     </div>
248     <div>
249         <ul id="smallBox"></ul>
250     </div>
251 </div>
252 </body>
253 </html>
posted on 2017-09-07 17:08 喵小娇阅读(148) 评论(0) 收藏举报
刷新页面返回顶部