简介这篇文章主要介绍了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();
}
})();