微客导航 » 文章资讯 » 原生JS实现轮播图效果

原生JS实现轮播图效果

2023-09-07 16:31:05 269

学习前端也有一小段时间了，当初在学习javascript的时候，练手的一个轮播图实例，轮播图也是挺常见的了。

着是通过获取图片偏移量实现的，也实现了无缝切换，还有一点问题就是没有加上图片切换的时候的延迟了。

html:

< >

js:

window.onload=function(){
//获取元素
varcontainer=document.getElementById('container');
varlist=this.document.getElementById('list');
varbuttons=document.getElementById('buttons').getElementsByTagName('span');
varprev=document.getElementById('prev');
varnext=document.getElementById('next');
varindex=1;//默认第一个小圆点亮

//小圆点的点亮
functionshowButton(){
//遍历小圆点的个数，当触发onclick事件后，className为‘on'的变为‘'。
for(vari=0;i-600){
//如果偏移量的位置大于-600的时候，图片跳转到第五张图片
list.style.left=-3000+'px';
}
if(newLift<-3000){
//如果偏移量的位置大于-3000的时候，图片跳转到第一张图片
list.style.left=-600+'px';
}
}
next.onclick=function(){
//如果button的index为5的时候，再点击next按钮会返回1；
if(index==5){
index=1;
}else{
index+=1;
}
showButton();
animate(-600);
}
prev.onclick=function(){
if(index==1){
index=5;
}else{
index-=1;
}
showButton();
animate(600);
}
}

更多关于轮播图效果的专题，请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

原生JS实现轮播图效果

热门推荐

随机推荐