JavaScript实现PC端横向轮播图

2023-08-01 23:10:04 166

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

步骤：

第一步：先实现右侧按钮点击图片动起来；
1.每次点击图片走的距离；
2.起始位置已知，计算定时器每走一小步的距离；

第二步：判断点击按钮一次图片移动的距离，停止定时器；

第三步：左边按钮逻辑和右侧按钮几乎一致；
1.因此封装函数move(flag),函数传参是Boolean则是左右按钮方向

第四步：无缝轮播：html结构修改，在当前结构分别加第一张图和最后一张图；
1.判断图片位置，设置相应位置；

第五步：小圆点逻辑：排他思想；
1.关键在于小圆点变色，用最终位置计算小圆点下标，设置样式；

第六步：点击小圆点，图片切换和小圆点位置对应，move函数中传参数根据类型判断，boolean是左右按钮，数值室小圆点下标相关；flag参数代表左右按钮和小圆点；

第七步：自动轮播：根据图片下标进行；

第八步：自动轮播和鼠标行为同步时：鼠标移入清楚自动轮播；鼠标移出自动轮播

第九步：鼠标移入后，点击按钮和小圆点有需要把自动轮播的小标值更新，否则没法同步；

html代码：

<
>

css代码：


*{
margin:0;
padding:0;
}

ul,
li{
list-style:none;
}

a{
text-decoration:none;
}

img{
display:block;
}

input{
outline:none;
}

.clearFix:after{
content:'';
display:block;
clear:both;
}
/*禁止系统滚动条*/

html,
body{
height:100%;
overflow:hidden;
}

#swiper{
position:relative;
width:1000px;
height:500px;
background:green;
margin:50pxauto0;
overflow:hidden;
}

#swiper.list{
position:absolute;
left:-1000px;
top:0;
width:7000px;
overflow:hidden;
}

#swiper.list>li{
float:left;
width:1000px;
height:500px;
}

#swiper.list>liimg{
width:100%;
height:100%;
}

#swiperspan{
position:absolute;
/*left:0;*/
top:40%;
transform:translateY(-50%);
width:80px;
height:100px;
background:rgba(0,0,0,0.5);
font-size:50px;
color:white;
font-weight:bold;
padding-top:30px;
text-align:center;
opacity:0;
transition:opacity1s;
cursor:pointer;
}

#swiper:hoverspan{
opacity:1;
}

#swiper.btn-left{
left:0;
}

#swiper.btn-right{
right:0;
}

#swiper.points{
position:absolute;
left:40%;
transform:translateX(-50%);
bottom:20px;
/*width:300px;*/
}

#swiper.points>li{
width:30px;
height:30px;
background:rgba(0,0,0,0.5);
border-radius:50%;
float:left;
margin:05px;
}

#swiper.points.current{
background:red;
}

javascript代码：

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

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

JavaScript实现PC端横向轮播图

热门推荐

随机推荐