简介这篇文章主要介绍了JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧，文章约11114字，浏览量505，点赞数3，值得参考！

*{

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;

}

.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: 30px;

position: absolute;

top:127px;

border: 10px solid red;

border-left: none;

border-bottom: none;

opacity: 0.3;

filter:alpha(opacity=30);

display: none;

}

.box a:hover{

opacity: 1;

filter:alpha(opacity=100);

}

.box .btnLeft{

transform: rotate(-135deg);

left:30px;

}

.box .btnRight{

transform: rotate(45deg);

right:30px;

}

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 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

strDiv+=‘

‘;

strLi+=i===0?‘

‘:‘‘;

}

strDiv+=‘

‘;

oBoxInner.innerHTML+=strDiv;

oBoxInner.style.width=aDiv.length*aDiv[0].offsetWidth+‘px‘;

oUl.innerHTML+=strLi;

}

//3.图片自动轮播

timer=setInterval(autoMove,1400);

function autoMove(){

if(step>=aDiv.length-1){

step=0;

css(oBoxInner,‘left‘,0)

}

step++;

animate(oBoxInner,{left:-step*1000});

bannerTip();

}

//4.焦点自动轮播

function bannerTip(){

var tmpStep=step>=aLi.length?0:step;

for(var i=0; i

aLi[i].className=i==tmpStep?‘on‘:null;

}

}

//5.鼠标移入停止，移出继续

oBox.οnmοuseοver=function(){

clearInterval(timer);

oBtnLeft.style.display=‘block‘;

oBtnRight.style.display=‘block‘;

};

oBox.οnmοuseοut=function(){

timer=setInterval(autoMove,1400);

oBtnLeft.style.display=‘none‘;

oBtnRight.style.display=‘none‘;

};

//6.点击焦点手动切换

handleChange();

function handleChange(){

for(var i=0; i

aLi[i].index=i;

aLi[i].οnclick=function(){

step=this.index;

animate(oBoxInner,{left:-step*1000});

bannerTip();

}

}

}

//7.点击左右按钮手动切换

oBtnRight.οnclick=autoMove;

oBtnLeft.οnclick=function(){

if(step<=0){

step=aDiv.length-1;

css(oBoxInner,‘left‘,-step*1000);

}

step--;

animate(oBoxInner,{left:-step*1000});

bannerTip();

}

})();