好资源导航 » 文章资讯 » 基于JavaScript实现简单的轮播图

基于JavaScript实现简单的轮播图

2023-07-04 21:25:03 77

本文实例为大家分享了JavaScript实现简单的轮播图的具体代码，供大家参考，具体内容如下

js轮播图实现思路

1、先获取元素盒子左右按钮
2、鼠标经过显示/隐藏左右侧按钮
3、动态生成小圆圈、添加自定义属性
4、小圆圈点击事件添加current类名
5、添加动画事件animate等于-索引号*focusWidth
6、克隆第一张图片到最后面
7、添加右侧/左侧按钮点击事件
8、设置定时器手动调用右侧按钮点击事件

html代码部分








Document






>

<

css样式部分

*{
padding:0;
margin:0;
}

li{
list-style:none;
}

img{
border:0;
vertical-align:top;
}

a{
text-decoration:none;
}

.focus{
position:relative;
width:721px;
height:455px;
margin:100pxauto;
overflow:hidden;
}

.focusul{
position:absolute;
top:0;
left:0;
width:600%;
}

.focusulli{
float:left;
}

.arrow_r,
.arrow_l{
display:none;
position:absolute;
top:50%;
transform:translateY(-50%);
width:40px;
height:40px;
line-height:40px;
text-align:center;
font-size:24px;
background:rgba(0,0,0,.2);
color:#fff;
z-index:1;
}

.arrow_r{
right:0;
}

.circle{
position:absolute;
bottom:10px;
left:50px;
}

.circleli{
float:left;
width:8px;
height:8px;
border:2pxsolidrgba(255,255,255,.5);
border-radius:50%;
margin:03px;
cursor:pointer;
}

.current{
background-color:#fff;
}

javascript部分

window.addEventListener('load',function(){
//获取元素
varfocus=document.querySelector('.focus');
vararrow_r=document.querySelector('.arrow_r');
vararrow_l=document.querySelector('.arrow_l');
varfocusWidth=focus.offsetWidth;
//鼠标经过focus盒子显示/隐藏左右侧按钮暂停轮播
focus.addEventListener('mouseenter',function(){
arrow_r.style.display='block';
arrow_l.style.display='block';
clearInterval(timer);
timer=null;
});
focus.addEventListener('mouseleave',function(){
arrow_r.style.display='none';
arrow_l.style.display='none';
timer=setInterval(function(){
//调用点击事件
arrow_r.click();
},2000);
});
//动态生成小圆圈
varul=focus.querySelector('ul');
varol=focus.querySelector('.circle');
for(vari=0;i0?Math.ceil(step):Math.floor(step);
if(obj.offsetLeft==target){
clearInterval(obj.timer);
callback&&callback();
}
obj.style.left=obj.offsetLeft+step+'px';

},15);
}
//自动轮播放轮播图
vartimer=setInterval(function(){
//调用点击事件
arrow_r.click();
},2000);
});

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

基于JavaScript实现简单的轮播图

js轮播图实现思路

html代码部分

热门推荐

随机推荐