JavaScript：100%原生js实现左右切换的轮播图(有延迟加载)
Posted WEB前端工程师----钱成
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript：100%原生js实现左右切换的轮播图(有延迟加载)相关的知识，希望对你有一定的参考价值。
<!--
说明：此.html文件必需有：
(1)同级文件夹json，json文件夹下必需有文件data.txt，文件data.txt的内容为：
[{"imgSrc":"img/banner1.jpg"},
{"imgSrc":"img/banner2.jpg"},
{"imgSrc":"img/banner3.jpg"},
{"imgSrc":"img/banner4.jpg"}]
(2)同级文件夹img，img文件夹下必需有下列图片：banner1.jpg;banner2.jpg;banner3.jpg;banner4.jpg;
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.box{
width: 1000px;
height: 300px;
position: relative;
margin:30px auto;
overflow: hidden;
}
.box .boxInner{
width: 4000px;
position: absolute;
left: 0;
top:0;
}
.box .boxInner div{
width: 1000px;
height: 300px;
float: left;
background: url("img/default.gif") no-repeat center #e1e1e1;
}
.box .boxInner div img{
width: 100%;
height: 100%;
}
.box ul{
position: absolute;
right:10px;
bottom:10px;
}
.box ul li{
width: 18px;
height: 18px;
background: #ccc;
border-radius: 50%;
margin-left: 10px;
float: left;
cursor: pointer;
}
.box ul li.on{
background: lightblue;
}
.box a{
width: 30px;
height: 45px;
position: absolute;
top:127px;
background-image: url("img/pre.png");
opacity: 0.3;
filter:alpha(opacity=30);
display: none;
}
.box a:hover{
opacity: 1;
filter:alpha(opacity=100);
}
.box .btnLeft{
left:30px;
background-position: 0 0;
}
.box .btnRight{
right:30px;
background-position: -50px 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="boxInner">
<!--<div><img src="img/banner1.jpg" /></div>
<div><img src="img/banner2.jpg" /></div>
<div><img src="img/banner3.jpg" /></div>
<div><img src="img/banner4.jpg" /></div>-->
</div>
<ul>
<!--<li class="on"></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<a href="javascript:;" class="btnLeft"></a>
<a href="javascript:;" class="btnRight"></a>
</div>
<div class="box box2" id="box2">
<div class="boxInner">
<!--<div><img src="img/banner1.jpg" /></div>
<div><img src="img/banner2.jpg" /></div>
<div><img src="img/banner3.jpg" /></div>
<div><img src="img/banner4.jpg" /></div>-->
</div>
<ul>
<!--<li class="on"></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<a href="javascript:;" class="btnLeft"></a>
<a href="javascript:;" class="btnRight"></a>
</div>
<script>
function getCss(curEle,attr){
var val=null;
var reg=null;
if(getComputedStyle){//标准
val=getComputedStyle(curEle,false)[attr];
}else{//非标准
if(attr===‘opacity‘){
val=curEle.currentStyle.filter; //‘alpha(opacity=10)‘
reg=/^alpha\(opacity[=:](\d+)\)$/i;
return reg.test(val)?reg.exec(val)[1]/100:1;
}
val=curEle.currentStyle[attr];
}
reg=/^[+-]?((\d|([1-9]\d+))(\.\d+)?)(px|pt|rem|em)$/i;
return reg.test(val)?parseInt(val):val;
}
function setCss(curEle,attr,value){
if(attr===‘float‘){
curEle.style.cssFloat=value;
curEle.style.styleFloat=value;
return;
}
if(attr===‘opacity‘){
curEle.style.opacity=value;
curEle.style.filter=‘alpha(opacity=‘+(value*100)+‘)‘;
return;
}
//对单位的处理
var reg=/^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i;
if(reg.test(attr)){
if(!(value===‘auto‘ || value.toString().indexOf(‘%‘)!==-1)){
value=parseFloat(value)+‘px‘;
}
}
curEle.style[attr]=value;
}
function setGroupCss(curEle,opt){
if(opt.toString()!==‘[object Object]‘) return;
for(var attr in opt){
this.setCss(curEle,attr,opt[attr]);
}
}
function css(curEle){
var arg2=arguments[1];
if(typeof arg2===‘string‘){
var arg3=arguments[2];
if(typeof arg3===‘undefined‘){ //当第三个参数不存在，是获取；
return this.getCss(curEle,arg2);
}else{
this.setCss(curEle,arg2,arg3);
}
}
if(arg2.toString()===‘[object Object]‘){ //获取一组元素
this.setGroupCss(curEle,arg2);
}
}
function animate(curEle,target,duration){
function tmpEffect(t, b, c, d) {
return c * t / d + b;
}
//1.为公式的每个参数做准备
var begin={};
var change={};
for(var attr in target){
begin[attr]=css(curEle,attr);
change[attr]=target[attr]-begin[attr];
}
duration=duration||700;
var time=0;
//2.开启一个定时器，让时间不断累加；根据时间和公式，求出最新的位置；
clearInterval(curEle.timer); //开起一个定时器前，先关闭没用的定时器
curEle.timer=setInterval(function(){
time+=10;
//3.停止运动的条件（time>=duration）
if(time>=duration){
css(curEle,target);
clearInterval(curEle.timer);
return;
}
//拿到每个属性的最新值，并且赋值给元素对应的属性；
for(var attr in target){
var curPos=tmpEffect(time,begin[attr],change[attr],duration);
css(curEle,attr,curPos);
}
},10)
}
(function(){
//获取元素
var oBox=document.getElementById("box");
var oBoxInner=oBox.getElementsByTagName(‘div‘)[0];
var aDiv=oBoxInner.getElementsByTagName(‘div‘);
var aImg=oBoxInner.getElementsByTagName(‘img‘);
var oUl=oBox.getElementsByTagName(‘ul‘)[0];
var aLi=oUl.getElementsByTagName(‘li‘);
var oBtnLeft=oBox.getElementsByTagName(‘a‘)[0];
var oBtnRight=oBox.getElementsByTagName(‘a‘)[1];
var data=null;
var timer=null;
var step=0;
//1.获取并解析数据
getData();
function getData(){
var xml=new XMLHttpRequest;
xml.open(‘get‘,‘json/data.txt‘,false);
xml.onreadystatechange=function(){
if(xml.readyState==4 && /^2\d{2}$/.test(xml.status)){
data=JSON.parse(xml.responseText);
}
};
xml.send();
}
//2.绑定数据
bind();
function bind(){
var strDiv=‘‘;
var strLi=‘‘;
for(var i=0; i<data.length; i++){
strDiv+=‘<div><img realImg="‘+data[i].imgSrc+‘" /></div>‘;
strLi+=i===0?‘<li class="on"></li>‘:‘<li></li>‘;
//通过判断，索引为0的，让其点亮，其他不用点亮
}
//注意：要把5个src都改成realImg;
strDiv+=‘<div><img realImg="‘+data[0].imgSrc+‘" /></div>‘;
//如果用字符串拼接的方式，插入页面，应该给innerHTML赋值；
//如果通过创建元素的方式，插入页面，应该给appendChild or insertBefore赋值；
oBoxInner.innerHTML+=strDiv;
oBoxInner.style.width=aDiv.length*aDiv[0].offsetWidth+‘px‘;
oUl.innerHTML+=strLi;
}
//3.延迟加载图片
setTimeout(lazyImg,500);
function lazyImg(){
for(var i=0; i<aImg.length; i++){
(function(index){
var curImg=aImg[index];
//1.创建一个图片对象
var tmpImg=new Image;
//2.给图片对象赋值正确的地址
tmpImg.src=curImg.getAttribute(‘realImg‘);
//3.校验地址
tmpImg.onload=function(){
curImg.src=this.src;
tmpImg=null;
}
})(i);
}
}
//4.图片自动轮播
timer=setInterval(autoMove,1400);
function autoMove(){
if(step>=aDiv.length-1){
step=0;
css(oBoxInner,‘left‘,0)
}
step++;
animate(oBoxInner,{left:-step*1000})
bannerTip();
}
//5.焦点自动轮播
function bannerTip(){
var tmpStep=step>=aLi.length?0:step;
for(var i=0; i<aLi.length; i++){
aLi[i].className=i==tmpStep?‘on‘:null;
}
}
//6.鼠标移入停止，移出继续
oBox.onmouseover=function(){
clearInterval(timer);
oBtnLeft.style.display=‘block‘;
oBtnRight.style.display=‘block‘;
};
oBox.onmouseout=function(){
timer=setInterval(autoMove,1400);
oBtnLeft.style.display=‘none‘;
oBtnRight.style.display=‘none‘;
};
//7.点击焦点手动切换
handleChange();
function handleChange(){
for(var i=0; i<aLi.length; i++){
aLi[i].index=i;
aLi[i].onclick=function(){
step=this.index;
animate(oBoxInner,{left:-step*1000});
bannerTip();
}
}
}
//8.点击左右按钮手动切换
oBtnRight.onclick=autoMove;
oBtnLeft.onclick=function(){
if(step<=0){
step=aDiv.length-1;
css(oBoxInner,‘left‘,-step*1000);
}
step--;
animate(oBoxInner,{left:-step*1000});
bannerTip();
}
})();
</script>
</body>
</html>
以上是关于JavaScript：100%原生js实现左右切换的轮播图(有延迟加载)的主要内容，如果未能解决你的问题，请参考以下文章