本文实例为大家分享了JavaScript实现PC端横向轮播图的具体代码，供大家参考，具体内容如下
步骤：
第一步：先实现右侧按钮点击图片动起来；
1.每次点击图片走的距离；
2.起始位置已知，计算定时器每走一小步的距离；
第二步：判断点击按钮一次图片移动的距离，停止定时器；
第三步：左边按钮逻辑和右侧按钮几乎一致；
1.因此封装函数move(flag),函数传参是Boolean则是左右按钮方向
第四步：无缝轮播：html结构修改，在当前结构分别加第一张图和最后一张图；
1.判断图片位置，设置相应位置；
第五步：小圆点逻辑：排他思想；
1.关键在于小圆点变色，用最终位置计算小圆点下标，设置样式；
第六步：点击小圆点，图片切换和小圆点位置对应，move函数中传参数根据类型判断，boolean 是左右按钮，数值室小圆点下标相关；flag参数代表左右按钮和小圆点；
第七步：自动轮播：根据图片下标进行；
第八步：自动轮播和鼠标行为同步时：鼠标移入清楚自动轮播；鼠标移出自动轮播
第九步：鼠标移入后，点击按钮和小圆点有需要把自动轮播的小标值更新，否则没法同步；
html代码：
<div id="swiper"> <ul class="list"> <li><img src="img/9.jpg" alt=""></li> <!-- 最后一张 --> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> <li><img src="img/6.jpg" alt=""></li> <li><img src="img/9.jpg" alt=""></li> <!-- 第一张 --> <li><img src="img/2.jpg" alt=""></li> </ul> <span class="btn-left"><</span> <span class="btn-right">></span> <ul class="points"> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> </ul>
css代码：
<style type="text/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: 50px auto 0;
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>li img {
width: 100%;
height: 100%;
}
#swiper span {
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: opacity 1s;
cursor: pointer;
}
#swiper:hover span {
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: 0 5px;
}
#swiper .points .current {
background: red;
}
</style>
javascript代码：
<script>
window.onload = function() {
// 获取变量
var swiper = document.querySelector('#swiper');
var list = document.querySelector('#swiper .list');
var liNodes = document.querySelectorAll('#swiper .list>li');
var btnNodes = document.querySelectorAll('#swiper span');
// 切换一张需要的总时长
var timeAll = 1000;
// 每走一步需要的时长
var timeStep = 20;
var timer = null;
// 小圆点
var icons = document.querySelectorAll('#swiper>.points li');
var isMove = false;
var autoTimer = null;
// 鼠标进入banner
swiper.onmouseenter = function() {
// 清除定时器
clearInterval(autoTimer);
}
// 鼠标离开banner
swiper.onmouseleave = function() {
// 打开自动轮播定时器
autoRun();
}
// 点击按钮切换图片
// 右按钮
btnNodes[1].onclick = function() {
// 图片且切换函数
move(true);
}
// 左按钮
btnNodes[0].onclick = function() {
// 图片切换函数
move(false);
}
// 图片切换函数
function move(flag) {
// 保证定时器只开一个，不会堆砌
if (isMove) {
return;
}
isMove = true;
// 区分flag参数，boolean是左右图片切换
if (typeof flag == 'boolean') {
if (flag) {
var elementDistance = -1000;
} else {
var elementDistance = 1000;
}
} else {
var elementDistance = flag - list.offsetLeft;
}
// 每次点击后，ul所走的距离
var elementLast = list.offsetLeft + elementDistance;
// 每走一小步的距离
var step = elementDistance / (timeAll / timeStep);
timer = setInterval(function() {
var left = list.offsetLeft + step;
if (left == elementLast) {
// 走的的距离等于最终的位置
clearInterval(timer);
if (left == -6000) {
left = -1000;
} else if (left == 0) {
left = -5000;
}
isMove = false;
}
// 设置样式
list.style.left = left + 'px';
}, timeStep);
// 小圆点切换逻辑
for (var i = 0; i < icons.length; i++) {
icons[i].className = '';
}
// 小圆点切换
var index = elementLast / -1000 - 1;
if (index > 4) {
index = 0;
} else if (index < 0) {
index = 4;
}
icons[index].className = 'current';
console.log(icons);
//让自动轮播和点击后下标保持统一
autoIndex = index + 1;
}
// 点击小圆点逻辑
for (var i = 0; i < icons.length; i++) {
icons[i].index = i;
icons[i].onclick = function() {
// 拿小圆点下标，求显示图片的下标，再求显示图片位置
move((this.index + 1) * -1000);
}
}
// 自动轮播逻辑
var autoIndex = 1;
autoRun();
function autoRun() {
autoTimer = setInterval(function() {
autoIndex++;
move(autoIndex * -1000);
if (autoIndex == 6) {
autoIndex = 1;
}
}, 2000);
}
}
</script>
