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学习总结----轮播图之渐隐渐现版相关推荐

图片竖轮播html,JS实现纵向轮播图（初级版）
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度 ...
Android 旋转木马轮播,js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下整个页面的文件结构如下图所示: html部分代码: 旋转木马轮播图在html部分引入的myStyle.css文件部分代 ...
php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...
HTML视频能不能做成轮播图,vue.js能做轮播图吗？
vue.js能做轮播图吗?答案是:可以.下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 最近新学习了vuejs,尝试着用v ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
js实现圆柱形轮播图
js实现圆柱形轮播图 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
使用js做简易轮播图，可自动
[作者注]:第一次使用js做简易轮播图首先在body里div个容器 div class="box"> <p id="p" ></p&g ...

js学习总结----轮播图之渐隐渐现版

js学习总结----轮播图之渐隐渐现版相关推荐

最新文章

热门文章