图片切换实例
Posted 喵小娇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片切换实例相关的知识，希望对你有一定的参考价值。
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="#"><</a></div> 243 <div class="right"><a id="next" href="#">></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>
以上是关于图片切换实例的主要内容，如果未能解决你的问题，请参考以下文章