原生js实现焦点轮播图效果
原生js焦点轮播图主要注意这几点：
1、前后按钮实现切换，同时注意辅助图
2、中间的button随着前后按钮对应切换，同时按button也能跳转到相应的index
3、间隔调用与无限轮播。
4、注意在动画时要停止按钮，或者说上一个动画完毕下一个动画才能执行
5、另外在切换图片的时候，底部的Button动画效果，是从底部开始往上升的，要用到transform:scale()和transform-origin:0100%两个转换属性，代码如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<metaname="viewpoint"content="width=device-width,initial-scale=1,user-scalable="no">
<title>20170101</title>
<styletype="text/css">
a{text-decoration:none;color:#3DBBF5;}
.wrapper{width:750px;height:350px;background:#001032;margin:20pxauto;text-align:center;box-shadow:0012px2pxhsla(0,20%,30%,0.5);padding:10px15px;position:relative;}
.effect{position:relative;cursor:pointer;}
.effect:hover{color:#02a0e9;}
.effect:before{width:100%;display:inline-block!important;position:absolute;height:1px;background:#02a0e9;transition:all0.4sease-in-out;-webkit-transition:all0.4sease-in-out;-moz-transition:all0.4sease-in-out;transform:scale(0,1);content:'';bottom:-5px;left:0;}
.effect:hover:before{transform:scale(1);-webkit-transform:scale(1);}
#lunBo{margin-top:20px;overflow:hidden;height:300px;width:750px;position:relative;}
#list{position:absolute;z-index:22;height:300px;width:5250px;}
#listimg{float:left;}
#buttons{position:absolute;height:20px;width:150px;z-index:99;bottom:20px;left:40%;}
span{cursor:pointer;float:left;width:10px;height:5px;background:#333;margin-right:10px;}
.on{background:yellow;transition:all0.4sease-in-out;-webkit-transition:all0.4sease-in-out;-moz-transition:all0.4sease-in-out;transform:scale(1,4);-ms-transform:scale(1,4);-moz-transform:scale(1,4);-webkit-transform:scale(1,4);transform-origin:0%0%;-webkit-transform-origin:0%100%;-moz-transform-origin:0%100%;}
.arrow{cursor:pointer;display:none;line-height:39px;text-align:center;font-size:36px;font-weight:bold;width:40px;height:100px;line-height:100px;position:absolute;z-index:92;top:30%;background-color:RGBA(0,0,0,.3);color:#fff;}
.arrow:hover{background-color:RGBA(0,0,0,.7);}
#lunBo:hover.arrow{display:block;}
#prev{left:0px;}
#next{right:0px;}
</style>
</head>
<body>
<divclass="wrapper">
<aclass="effect"href="#">2016完了,2017来了</a>
<divid="lunBo">
<divid="list"style="left:-750px;">
<imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856saeagzgsnwal15n5.jpg"alt=""/>
<imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/02/235009drzwcaxem2wfgmdc.jpg"alt=""/>
<imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856m1bhxxx1d8jfnblb.jpg"alt=""/>
<imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856z48mfrrr8u064rf6.jpg"alt=""/>
<imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856e95yze236lvq7y2a.jpg"alt=""/>
<imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856saeagzgsnwal15n5.jpg"alt=""/>
<imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/02/235009drzwcaxem2wfgmdc.jpg"alt=""/>
</div>
<divid="buttons">
<spanindex="1"class="on"></span>
<spanindex="2"></span>
<spanindex="3"></span>
<spanindex="4"></span>
<spanindex="5"></span>
</div>
<ahref="javascript:;"id="prev"class="arrow"><</a>
<ahref="javascript:;"id="next"class="arrow">></a>
</div>
</div>
<script>
window.onload=function(){
varlunBo=document.getElementById('lunBo');
varlist=document.getElementById('list');
varbuttons=document.getElementById('buttons').getElementsByTagName('span');
//console.log(buttons);
varprev=document.getElementById('prev');
varnext=document.getElementById('next');
varindex=1;
varanimated=false;
varinterval=3000;
vartimer;
//显示按钮的索引
functionshowButton(){
for(vari=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
break;
};
};
buttons[index-1].className='on';
};
functionplay(){
timer=setTimeout(function(){
next.onclick();
play();
},interval);
};
functionstop(){
clearTimeout(timer);
};
//向前按钮
next.onclick=function(){
if(animated){
return;
}
if(index==5){
index=1;
}
else{
index+=1;
}
animate(-750);
showButton();
};
prev.onclick=function(){
if(animated){
return;
}
if(index==1){
index=5;
}
else{
index-=1;
}
animate(750);
showButton();
};
//parseInt()转换为纯数值
functionanimate(offset){
animated=true;
varnewLeft=parseInt(list.style.left)+offset;//目标值
vartime=300;//位移总时间为300
varinterval=10;//
varspeed=offset/(Math.floor(time/interval));//每次位移量
functiongo(){
if((speed<0&&parseInt(list.style.left)>newLeft)||(speed>0&&parseInt(list.style.left)<newLeft)){
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);
}else{
animated=false;
list.style.left=newLeft+'px';//现在的位移
if(newLeft>-750){//假的辅助图
list.style.left=-3750+'px';
}
if(newLeft<-3750){
list.style.left=-750+'px';
}
}
};
go();
};
//小按钮
for(vari=0;i<buttons.length;i++){
buttons[i].onclick=function(){
if(this.className=='on'){
return;
};
varmyIndex=parseInt(this.getAttribute('index'));
varoffset=-750*(myIndex-index);
animate(offset);
index=myIndex;
showButton();
}
}
lunBo.onmouseout=play;
lunBo.onmouseover=stop;
play();
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！