js-轮播图的总结
/*兩種播放行為；（一種自動播放，一種控制播放），一個定時器控制。
*一個定時器控制兩種播放狀態。
* 布局說明：裝圖片的盒子足夠寬，讓圖片左浮，排成一排，最后一張重新放置第一張。
* 定時器里執行自動播放行為。
* 定義一個計時器（全局），根據計時器對個數*圖片的寬，讓它左移，再次根據計時器%（總個數-1）修改當前顯示的提示標識。
* 通過標識控制行為。
* 當觸發標識時，清除上述的定時器，根據計時器產生左移運動，同時修改當前的標識，再次開啟定時器執行自動播放行為。
* */
?
?
<<<<<<============== 透明度 輪播圖的總結 ===============>>>>>>
<!-- 透明度--輪播解析：
布局說明： 給圖片盒子相對定位，下面的子元素絕對定位。并且設置z-index=0,opacity=0;設置層疊定位和透明度。添加修飾的過度。transition屬性。
js 控制：
遍歷控制切換圖片的標識，修改當前的z-index的值和透明度。
-->
?
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <style> body,ul{margin:0;padding:0;} li{ list-style:none;} img{ vertical-align:top; border:none;} /*#list{ position:relative; height:400px; -webkit-mask:url(../mask.png) center;}*/ #list{ position:relative; height:400px;} #list li{position:absolute;width:100%; left:0;top:0; z-index:0; opacity:0; -webkit-transition:0.7s opacity ease;-o-transition:0.7s opacity ease;-moz-transition:0.7s opacity ease;} #list li:nth-child(1){ z-index:1; opacity:1;} /*#list a{ display:block; height:400px; background:url(img/1.jpg) no-repeat center 0;} #list li:nth-of-type(2) a{ background:url(img/2.jpg) no-repeat center 0;} #list li:nth-of-type(3) a{ background-image:url(img/3.jpg);} #list li:nth-of-type(4) a{ background-image:url(img/4.jpg);} #list li:nth-of-type(5) a{ background-image:url(img/5.jpg);}*/ #list a{ display:block; height:400px;}.footer{background:url(img/scroll_bg.png);} .footer_c{ width:825px; margin:0 auto;height:76px; position:relative;} .pic_list{ position:absolute;left:0;top:0;} .pic_list li{ float:left; margin:5px 10px;width:145px;height:65px;background:#000;} #active{ position:absolute;left:8px;top:3px; width:145px;height:65px; border:2px solid #FF780D; background:url(img/arrow_on.png) no-repeat center 0; -webkit-transition:0.7s left ease;-o-transition:0.7s opacity ease;-moz-transition:0.7s opacity ease;} body{ min-width:825px;} </style> <script> window.onload=function() { var oList=document.getElementById("list"); var oBtns=document.getElementById("btns"); var aBtns=oBtns.getElementsByTagName("li"); var aLi=oList.getElementsByTagName("li"); var oActive=document.getElementById("active"); var iZindex=1; var i=0; var iNow=0; for(i=0;i<aBtns.length;i++) { aBtns[i].index=i; aBtns[i].onmouseover=function() { iZindex++; aLi[this.index].style.zIndex=iZindex; aLi[iNow].style.opacity=0; aLi[this.index].style.opacity=1; iNow=this.index; oActive.style.left=this.offsetLeft-2+"px"; }; } }; </script> </head> <body> <ul id="list"> <li><a href="#"><img src="img/1.jpg" alt=""></a></li> <li><a href="#"><img src="img/2.jpg" alt=""></a></li> <li><a href="#"><img src="img/3.jpg" alt=""></a></li> <li><a href="#"><img src="img/4.jpg" alt=""></a></li> <li><a href="#"><img src="img/5.jpg" alt=""></a></li> </ul> <div class="footer"> <div class="footer_c"> <ul class="pic_list" id="btns"> <li><img src="img/smail_1.gif" /></li> <li><img src="img/smail_2.gif" /></li> <li><img src="img/smail_3.gif" /></li> <li><img src="img/smail_4.gif" /></li> <li><img src="img/smail_5.gif" /></li> </ul> <div id="active"></div> </div> </div> </body> </html>?
轉載于:https://www.cnblogs.com/intelwisd/p/7285594.html
總結
- 上一篇： [HZOI 2016][Tyvj 172
- 下一篇： .Net Core 部署到Ubuntu