js学习总结----轮播图之渐隐渐现版
生活随笔
收集整理的這篇文章主要介紹了
js学习总结----轮播图之渐隐渐现版
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
具體代碼如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;font-size:14px;-webkit-user-select:none;}ul,li{list-style}img{display: block;border:none;}.banner{position:relative;width:1000px;height:300px;margin:0 auto;overflow:hidden;}.banner .bannerInner{width:100%;height:100%;background:url("../img/default.gif") no-repeat center center #e1e1e1;}.banner .bannerInner div{position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;opacity:0;filter:alpha(opacity=0);}.banner .bannerInner img{display:none;width:100%;height:100%s;}.banner .bannerTip{position:absolute;height:18px;overflow:hidden;right:20px;bottom:20px;z-index:10;}.banner .bannerTip li{float:left;margin-left:10px;width:18px;height:18px;background:lightblue;cursor:pointer;border-radius:50%;}.banner .bannerTip li.bg{background:red;}.banner a{display:none;position:absolute;top:50%;z-index:20;margin-top:-22.5px;width:30px;height:45px;background:url("../img/pre.png");opacity:0.5;filter:alpha(opacity=50);}.banner a:hover{opacity:1;filter:alpha(opacity=100);}.banner a.bannerLeft{left:20px;background-position:0 0;}.banner a.bannerRight{right:20px;background-position:-50px 0;}</style> </head> <body><div class='banner' id='banner'><div class='bannerInner'><div><img src="" alt="" trueImg="img/banner1.jpg"></div><div><img src="" alt="" trueImg="img/banner2.jpg"></div><div><img src="" alt="" trueImg="img/banner3.jpg"></div><div><img src="" alt="" trueImg="img/banner4.jpg"></div></div><ul class='bannerTip'><li class='bg'></li><li></li><li></li><li></li></ul><a href="javascript:;" class='bannerLeft'></a><a href="javascript:;" class='bannerRight'></a></div><script>var banner = document.getElementById('banner');var bannerInner = utils.firstChild(banner),bannerTip = utils.children(banner,"ul")[0],bannerLink = utils.children(banner,'a'),bannerLeft = bannerLink[0],bannerRight = bannerLink[1];var divList = bannerInner.getElementsByTagName('div');var imgList = bannerInner.getElementsByTagName('img');var oLis = bannerTip.getElementsByTagName('li');//1、Ajax讀取數據var jsonData = null;~function(){var xhr = new XMLHttpRequest;xhr.open("get","json/banner.txt?_="+Math.random(),false);xhr.onreadystatechange = function(){if(xhr.readyState ===4 && /^2\d{2}$/.test(xhr.status)){jsonData = utils.formatJSON(xhr.responseText)}}xhr.send(null)}()//2、數據綁定~function(){var str = "",str2 = "";if(jsonData){for(var i = 0,len=jsonData.length;i<len;i++){var curData = jsonData[i];str+='<div><img src="" alt="" trueImg="'+curData['img']+'"></div>';i===0?str2+="<li class='bg'></li>":str2+="<li></li>"}}bannerInner.innerHTMl = str;bannerTip.innerHTML = str2;}()//3、圖片的延遲加載window.setTimeout(lazyImg,500)function lazyImg(){for(var i = 0,len = imgList.length;i<len;i++){~function(i){var curImg = imgList[i];var oImg = new Image;oImg.src = curImg.getAttribute('trueImg');oImg.onload = function(){curImg.src = this.src;curImg.style.display = block;//只對第一張處理if(i===0){var curDiv = curImg.parentNode;curDiv.style.zIndex = 1;myAnimate(curDiv,{opacity:1},200);}oImg = null;}}(i)}}//4、自動輪播var interval = 3000,autoTimer = null,step = 0;autoTimer = window.setInterval(autoMove,interval);function autoMove(){//當已經把最后一張展示完成后(step等于最后一張的索引),我們應該展示第一張，我們讓step = -1,這樣再經過一次累加，step就變為0，來展示第一張if(step === jsonData.length-1){step = -1}step++;setBanner();}//實現輪播圖切換效果的代碼function setBanner(){//1、讓step索引對應的那個DIV的zIndex的值為1，其他的zIndex為0 for(var i = 0,len = divList.length;i<len;i++){var curDiv = divList[i];if(i===step){utils.css(curDiv,"zIndex",1)//2、讓當前的透明度從0變為1,當動畫結束，我們需要讓其他的div的透明度的值直接變為0myAnimate(curDiv,{opacity:1},200,function(){var curDivSib = utils.siblings(this);for(var k = 0,len = curDivSib.length;k<len;k++){utils.css(curDivSib[k],'opacity',0)}})continue}utils.css(curDiv,"zIndex",0)}//實現焦點對其for(i = 0,len = oLis.length;i<len;i++){var curLi = oLis[i];i === step?utils.addClass(curLi,"bg"):utils.removeClass(curLi,"bg");}}//5、實現鼠標懸停停止自動輪播和離開在開啟自動輪播banner.onmouseover = function(){window.clearInterval(autoTimer);bannerLeft.style.display = bannerRight.style.display = "block"}banner.onmouseout = function(){autoTimer = window.setInterval(autoMove,interval);bannerLeft.style.display = bannerRight.style.display = "none"}//6、實現點擊焦點切換~function(){for(var i = 0,len = oLis.length;i<len;i++){var curLi = oLis[i];curLi.index = i;curLi.onclick = function(){step = this.index;setBanner();}}}()//7、實現左右切換bannerRight.onclick = autoMove;bannerLeft.onclick = function(){if(step === 0){step = jsonData.length;}step--;setBanner();}</script> </body> </html>轉載于:https://www.cnblogs.com/diasa-fly/p/7188671.html
總結
以上是生活随笔為你收集整理的js学习总结----轮播图之渐隐渐现版的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 联想b50怎么进入U?P??? 如何进入
- 下一篇： 新电脑开机怎么分区 新电脑如何进行硬盘分