你的位置:首页 > Java教程

[Java教程]小米官网图片轮播


小米官网给我的感觉是大气、干净。很多特效的加入让人觉得耳目一新,big满满。 看到他们首页的轮播图实现挺有意思,于是自己模仿着写了一个。

大致的感觉出来了,贴个图先:

通过前端神器chrom的F12观察小米官网的html代码,不难看到他们使用5个div包裹图片并使用了定位通过z-index来控制div层级,通过控制每个div的opacity属性和display属性进行元素的显示、隐藏。

截图如下(红框内的opacity属性):

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2     "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 6   <title>Mking_js_</title> 7   <script type="text/javascript" src="js/moveopacity_1.js"></script> 8   <style type="text/css"> 9     #warp{ width:800px; height: 400px; margin: 20px auto; 10       position: relative;}11     #imgWarp{ width:600px; height: 400px;12       position: absolute; top:0; left: 100px; display: inline-block;13     }14     15     .btn:hover{cursor: pointer;}16     .btn{line-height: 30px; text-align: center;font-size: 25px; font-weight: bold;17       color: #fff;width:80px; height: 30px;top:185px;background: #5f7c8a;position: absolute;18       border-radius: 3px;19     }20     .btn:nth-of-type(1){21        left: 0; }22     .btn:nth-of-type(2) {23       right: 0; }24 25     img26     {27       position: absolute;28       width:600px; height: 400px;29       background-size:contain;30       opacity: 0;31       display: none;32       z-index: 0;33     }34     img:nth-of-type(1) {35        opacity: 1;36        display: block;37       z-index:5;38     }39     .links{ width:300px; height: 30px;40       position: absolute; right:100px; bottom: 10px; z-index: 10; }41     em{font-style: normal; display: inline-block; height: 30px; width: 30px;42       margin-right: 15px; border: 1px solid #000000; vertical-align: top;43       line-height: 30px; font-size: 20px; text-align: center;color: #fff;44       font-weight: bold; border-radius: 50%; background-color: #008000;45       border-color: #c0c0c0;46       box-sizing: border-box;47     }48      em.active{49        background-color: #fff;50        color: #000000;51     }52   </style>53 </head>54 <body>55   <div id="warp">56     <div id="imgWarp" >57       <img id="img1" src="product/1.jpg" TITLE="img1" />58       <img id="img2" src="product/2.jpg" TITLE="img2"/>59       <img id="img3" src="product/3.jpg" TITLE="img3"/>60       <img id="img4" src="product/4.jpg" TITLE="img4"/>61       <img id="img5" src="product/5.jpg" TITLE="img5" />62     </div>63     <span class="btn" id="left">left</span>64     <span class="btn" id="right">right</span>65     <div class="links">66       <em class="active"></em>67       <em></em>68       <em></em>69       <em></em>70       <em></em>71     </div>72   </div>73 </body>74 </html>

轮播html结构


结构已经有了下面就是添加js让它动起来。

页面中的js:

 1 window.onload = function(){ 2         var oLeft = document.getElementById("left"); 3         var oRight = document.getElementById("right"); 4  5         var oWarp = document.getElementById("imgWarp"); 6         var aImg = oWarp.getElementsByTagName("img"); 7         var aEm = document.getElementsByTagName("em");  8         var i = 5; 9         btn = true;10         oLeft.onclick = function(){11           clearInterval(autoTimer);12           if(btn){ 13             btn=false;14             fnAutoLeft();15           }16         };17         function fnAutoLeft(){18           var a = i % 5;19           i-=1;20           var b = i % 5; 21           startOpacMove(aImg[a],0,aImg[b],100);22           setStyle(b);23         }24 25        oRight.onclick = function(){26           if(btn){ //单位时间内只能触发一次元素的显示隐藏27             clearInterval(autoTimer);28             btn=false;29             fnAutoRight();30            }31         };32         var count =0;33         function fnAutoRight(){34           var a = i % 5;35           i+=1;36           var b = i % 5;37           38           startOpacMove(aImg[a],0,aImg[b],100); 39           setStyle(b);40           if(i==10){41             i=5;42 43             for(var j = 0;j<aImg.length;j++){44              if(j==0){45                aImg[0].style.cssText ="opacity: 1; z-index: 5; display: block;";46               }47              else{48                aImg[j].style.cssText ="opacity: 0; z-index: 0; display: none;";49               }50             }51           }52         }53 54         var autoTimer = setInterval(fnAutoRight,5000);55         56         function setStyle(a){57           for(var i=0;i<aEm.length;i++){58             aEm[i].className="";59           } 60           aEm[a].className="active";61         }62       }

javascript代码

运动的js:

 1 function startOpacMove(obj1,tag1,obj2,tag2) 2  {  3    var iCur1 = 0; 4    var iCur2 = 0;  5    var iTimer = null; 6    var iSpeed1 = -2; 7    var iSpeed2 = 2; 8    clearInterval(iTimer);  9    iTimer = setInterval(function(){10 11       var iBtn = true;12 13       iCur1 = css(obj1,'opacity')*100;14       iCur2 = css(obj2,'opacity')*100;15       iCur1 = Math.floor(iCur1);16       iCur2 = Math.floor(iCur2); 17 18       if(iCur1 != tag1 && iCur2 != tag2){19         iBtn = false;20         21         obj1.style.opacity = (iCur1+iSpeed1)/100;22        // console.log("隐藏元素时候的透明度值:"+(iCur1+iSpeed1)/100);23         obj1.style.filter = 'alpha(opacity='+(iCur1+iSpeed1)+')';24         obj1.style.zIndex = 0;25         26         obj2.style.opacity = (iCur2+iSpeed2)/100;27         obj2.style.filter = 'alpha(opacity='+(iCur2+iSpeed2)+')';28         obj2.style.zIndex = 5;29         obj2.style.display ="block";30       }31 32      if(iBtn){33         clearInterval(iTimer);34        obj1.style.display ="none";35        obj1.style.opacity =0;36        obj2.style.opacity =1; 37        btn = true;38       }39     },10);40 }41       42 function css(obj,attr){43   if(obj.currentStyle){ //当前浏览器下存在currentStyle属性44     return obj.currentStyle[attr];45   }else{46     return getComputedStyle(obj,false)[attr];47   }48 }49 

View Code

 

看下js代码是如何让图画动起来的

思考一个问题:画面是如何向左向右切换的,完成这一步的必要条件是什么。假设当前显示的第一张图,向右切换时隐藏第一张图显示第二张图,那么需要做的就是让索引为0的图片隐藏,索引为1的图片显示,再次点击向右按钮索引为1的图片隐藏索引为2的图片显示,后面的情况依次类推,需要获取的索引为0,1,2,3,4。最后注意下右侧的边界问题就OK了。

好的,贴代码:

1 var i = 5; 2 function fnAutoRight(){3   var a = i % 5;4    i+=1;5   var b = i % 5;6 }

用变量 i 对5取余,得到的值是0-4的数,刚好是我们想要的结果,对应的a、b也刚好是想要隐藏、显示的图片的索引。再调用写好的运动js、下方显示当前图片位置函数,那么向右这一块就OK了。

 

图片向左移动,向下我们需要隐藏显示的图片索引是什么,假设当前是第一张图片点击向左的时候,隐藏的图片索引为0,显示的图片索引为4,再次点击隐藏的索引为4显示的为3。显而易见,我们需要的索引为0、4、3、2、1。

代码如下:

1 var i=5;2 function fnAutoLeft(){3   var a = i % 5;4   i-=1;5   var b = i % 5; 6 }

同样是i=5,然后对5取余,得到的a为当前需要隐藏的图片索引,让i减一之后再对5取余得到的是需要显示的图片索引。这样向左的问题也就解决了。

在最后部分,写个setInterval定时播放的函数,然后设置一个间隔调用的时间,就完成了自动播放的功能。