简单实现js轮播图效果
程序员文章站
2023-09-08 19:53:35
本文实例为大家分享了js实现轮播图效果展示的具体代码,供大家参考,具体内容如下
html结构
本文实例为大家分享了js实现轮播图效果展示的具体代码,供大家参考,具体内容如下
html结构
<!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:none; } img{ display:block; border:none; } a{ display:block; color:#000; text-decoration: none; } a:hover,a:active,a:visited,a:target{ display:block; color:#000; text-decoration: none; } .banner{ position:relative; margin:0 auto; width:1000px; height:300px; overflow:hidden; } .banner .inner{ position:absolute; top:0; left:0; height:300px; width:1000px;/*在js数据绑定结束后根据请求数据的多少来动态调整宽度*/ } .banner .inner div{ float:left; width:1000px; height:300px; background:url('img/default.gif') no-repeat center center #e1e1e1; } .banner .inner img{ display:none; width:100%; height:100%; opacity:0; filter:alpha(opacity=0); } .banner .bannertip{ height:18px; position:absolute; right:20px; bottom:20px; } .banner .bannertip li{ float:left; margin-left:10px; width:18px; height:18px; border-radius:50%; background:lightblue; cursor:pointer; } .banner .bannertip li.bg{ background:red; } .banner a{ display:none; position:absolute; top:50%; margin-top:-22.5px; width:30px; height:45px; background-image:url("img/pre.png"); background-repeat:no-repeat; 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:-45px 0; } </style> </head> <body> <div class='banner' id='banner'> <div class='inner'> <div><img src="img/banner1.jpg" alt=""></div> <div><img src="img/banner2.jpg" alt=""></div> <div><img src="img/banner3.jpg" alt=""></div> <div><img src="img/banner4.jpg" alt=""></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> </body> </html>
js
(function(){ var banner = document.getelementbyid('banner'); var bannerinner = utils.firstchild(banner); var bannertip = utils.children(banner,'ul')[0]; var imglist = bannerinner.getelementsbytagname('img'); var olis = bannertip.getelementsbytagname('li'); var bannerleft = utils.children(banner,'a')[0]; var bannerright = utils.children(banner,'a')[1]; //实现数据绑定:ajax请求数据、按照字符串拼接的方式绑定数据 var jsondata = null,count = null ~function(){ var xhr = new xmlhttlrequest; 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); }() ~function(){ //绑定轮播图区域的数据 var str = ""; if(jsondata){ for(var i = 0,len = jsondata.length;i<len;i++){ str+='<div><img src="" trueimg="'+jsondata[i]['img']+'"></div>' } //为了实现无缝滚动,需要把第一张克隆一份放在末尾 str+= '<div><img src="" trueimg="'+jsondata[0]['img']+'"></div>' } bannerinner.innerhtml = str; count = jsondata.length+1; utils.css(bannerinner,"width",count*1000); //绑定焦点区域的数据 str = ''; if(jsondata){ for(var i = 0,len = jsondata.length;i<len;i++){ i===0?str+='<li class="bg"></li>':str+='<li></li>'; } } bannertip.innerhtml = str; }() //图片延迟加载 function lazyimg(){ for(var i = 0,len = imglist.length;i<len;i++){ ~function(i){//这里使用闭包,来避免onload事件异步导致的只有最后一张图片延迟加载的问题 var curimg = imglist[i]; var oimg = new image; oimg.src = curimg.getattribute('trueimg'); oimg.onload = function(){ curimg.src = this.src; curimg.style.display = "block"; oimg = null; myanimate(curimg,{opacity:1},300) } }(i) } } window.settimeout(lazyimg,500); var step = 0;//记录的是步长,(当前是哪一张图片,0是第一张图片) //实现自动轮播 var autotimer = window.setinterval(automove,2000); function automove(){ if(step===count-1){ step =0; bannerinner.style.left = 0 } step++; myanimate(bannerinner,{left:-step*1000},500) changetip(); } //实现焦点对齐 function changetip(){ var tempstep = step > olis.length-1 ? 0 : step; for(var i = 0,len = olis.length;i<len;i++){ var curli = olis[i]; i === tempstep ? utils.addclass(curli,"bg") : utils.removeclass(curli,"bg") } } //鼠标滑过停止和开启轮播 banner.onmouseover = function(){ window.clearinterval(autotimer); bannerleft.style.display = bannerright.style.display = 'block'; } banner.onmouseout = function(){ autotimer = window.setinterval(autotimer,2000); bannerleft.style.display = bannerright.style.display = 'none'; } //点击焦点实现轮播图的切换 ~function(){ for(var i = 0,len = olis.length;i<len;i++){ var curli = olis[i]; curli.index = i; curli.onclick = function(){ step = this.index; changetip(); myanimate(bannerinner,{left:-step*1000},500) } } }() //实现左右切换 bannerright.onclick = automove(); bannerleft.onclick = function(){ if(step<=0){ step = count-1; utils.css(bannerinner,"left",-step*1000); } step--; automove(); } })()
绑定的数据
[ {"img":"img/banner1.jpg","desc":"第一张轮播图"}, {"img":"img/banner2.jpg","desc":"第二张轮播图"}, {"img":"img/banner3.jpg","desc":"第三张轮播图"}, {"img":"img/banner4.jpg","desc":"第四张轮播图"} ]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读