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":"第四张轮播图"} ]
