js-轮播图的总结
/*兩種播放行為；（一種自動(dòng)播放，一種控制播放），一個(gè)定時(shí)器控制。
*一個(gè)定時(shí)器控制兩種播放狀態(tài)。
* 布局說(shuō)明：裝圖片的盒子足夠?qū)?#xff0c;讓圖片左浮，排成一排，最后一張重新放置第一張。
* 定時(shí)器里執(zhí)行自動(dòng)播放行為。
* 定義一個(gè)計(jì)時(shí)器（全局），根據(jù)計(jì)時(shí)器對(duì)個(gè)數(shù)*圖片的寬，讓它左移，再次根據(jù)計(jì)時(shí)器%（總個(gè)數(shù)-1）修改當(dāng)前顯示的提示標(biāo)識(shí)。
* 通過(guò)標(biāo)識(shí)控制行為。
* 當(dāng)觸發(fā)標(biāo)識(shí)時(shí)，清除上述的定時(shí)器，根據(jù)計(jì)時(shí)器產(chǎn)生左移運(yùn)動(dòng)，同時(shí)修改當(dāng)前的標(biāo)識(shí)，再次開(kāi)啟定時(shí)器執(zhí)行自動(dòng)播放行為。
* */
?
?
<<<<<<============== 透明度 輪播圖的總結(jié) ===============>>>>>>
<!-- 透明度--輪播解析：
布局說(shuō)明： 給圖片盒子相對(duì)定位，下面的子元素絕對(duì)定位。并且設(shè)置z-index=0,opacity=0;設(shè)置層疊定位和透明度。添加修飾的過(guò)度。transition屬性。
js 控制：
遍歷控制切換圖片的標(biāo)識(shí)，修改當(dāng)前的z-index的值和透明度。
-->
?
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無(wú)標(biāo)題文檔</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>?
轉(zhuǎn)載于:https://www.cnblogs.com/intelwisd/p/7285594.html
總結(jié)
- 上一篇： [HZOI 2016][Tyvj 172
- 下一篇： .Net Core 部署到Ubuntu