您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
利用原生JavaScript怎么实现一个pc端的轮播图效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
案例：轮播图需求
布局：ul下有很多li标签；浮动在一行；
原理：切换图片的时候，把ul位置修改一下，给ul的父容器，设置一个 overflow:hidden；
功能需求：
序号轮播
左右按钮的轮播
自动轮播
鼠标在轮播图里面的时候，停止自动轮播，离开后继续自动轮播
实现效果：
html部分
<div class="box" id="box"> <div class="inner" id="inner"> <ul id="imglist"> <li> <a href="#" ><img src="images/1.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images/2.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images/3.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images/4.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images/5.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images/6.jpg" alt=""></a> </li> </ul> <div class="list"> <i class="current">1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i> <i>6</i> </div> <div class="arrow"> <span class="arrow-left"><</span> <span class="arrow-right">></span> </div> </div> </div>
css部分
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 730px;
height: 454px;
padding: 8px;
border: 1px solid green;
margin: 100px auto;
}
.inner {
position: relative;
overflow: hidden;
height: 454px;
}
#imglist {
width: 700%;
position: absolute;
left: 0;
transition: left 300ms linear;
}
li {
float: left;
}
.list {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -85px;
}
.list i {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
color: #333;
float: left;
font-style: normal;
line-height: 20px;
font-size: 14px;
text-align: center;
margin-right: 10px;
cursor: pointer;
}
.list i:last-child {
margin-right: 0;
}
.list i.current {
background-color: skyblue;
color: #fff;
}
.arrow {
position: absolute;
width: 100%;
top: 50%;
margin-top: -30px;
}
.arrow-left,
.arrow-right {
width: 30px;
height: 60px;
position: absolute;
font: 20px/60px "consolas";
color: #fff;
background-color: rgba(0, 0, 0, .3);
text-align: center;
cursor: pointer;
}
.arrow-right {
right: 0;
}js部分：
// 获取DOM
var yuan = document.querySelectorAll("i");
var li = document.querySelector("ul li");
var ul = document.querySelector("ul");
var imgs = document.querySelector("#imglist");
var right = document.querySelector(".arrow-right");
var left = document.querySelector(".arrow-left");
var box = document.querySelector(".box");
window.onload = function() {
//------------------------------------这里是点击小圆圈，控制图片的切换
//循环小圆点 注册小圆点
for (var i = 0; i < yuan.length; i++) {
//我们需要这里面的i 必须提前拿出来，要不最后i的值就是最后一个数值了
yuan[i].num = i;
//注册事件
yuan[i].onmouseover = function() {
// 现在要循环将样式移除
for (var j = 0; j < yuan.length; j++) {
yuan[j].classList.remove("current");
}
//这里是为了将点击的小圆点 增加上样式
this.classList.add("current");
var num = this.num;
//到这里的思路就是点击小圆点 将图片进行移动，向左面移动，上面css做了相应的定位操作
//移动的距离就是 n 乘以 一张图片的宽度，
//n 就是选择的小圆点的 坐标-----i(num)
//图片的宽度 box.offsetWidth
var left = num * li.offsetWidth;
// console.log(num, box.offsetWidth, left);
imgs.style.left = `-${left}px`;
//这里小原点联动左右按钮
for (var p = 0; p < yuan.length; p++) {
//清除全部样式（小圆点）
yuan[p].classList.remove("current");
}
//给当前的小圆点增加样式
yuan[num].classList.add("current");
//这里这个位置比较关键，在上面设置完样式之后，记得将此num赋值给全局的index
index = this.num;
}
}
//------------------------------------以上是点击小圆圈，控制图片的切换
//------------------------------------下面是开始右面轮播，控制图片的切换
//首先定义一个全局的index，这个index的作用依旧是控制图片的切换
var index = 0;
right.onclick = function() {
index++;
//这里要对index做一下判断，如果不做判断，可以试想一下，
//只要你一点击，index就会无限的增大，增大到你“无法自拔”
if (index == ul.children.length) {
//如果坐标为6的话，显示应该显示第1张图片，所以要复位 即index=0
index = 0;
}
var left = index * li.offsetWidth;
// console.log(index, box.offsetWidth, left);
imgs.style.left = `-${left}px`;
//点击右面增加联动小圆点的效果
for (var n = 0; n < yuan.length; n++) {
//清除全部样式（小圆点）
yuan[n].classList.remove("current");
}
//给当前的小圆点增加样式
yuan[index].classList.add("current");
};
//------------------------------------以上是结束右面轮播，控制图片的切换
//------------------------------------下面是开始左面轮播，控制图片的切换
left.onclick = function() {
index--;
//这里同右点击一样，需要做一下判断，
console.log(index);
if (index == -1) {
index = ul.children.length - 1;
}
var left = index * li.offsetWidth;
// console.log(index, box.offsetWidth, left);
// console.log(left);
imgs.style.left = `-${left}px`;
//这个位置做的是 左面点击联动小圆点
for (var m = 0; m < yuan.length; m++) {
//清除全部样式（小圆点）
yuan[m].classList.remove("current");
}
//给当前的小圆点增加样式
yuan[index].classList.add("current");
};
//------------------------------------上面是结束左面轮播，控制图片的切换
//------------------------------------开始设置自动轮播
var timer = setInterval(function() {
right.onclick();
}, 1000);
//------------------------------------以上是自动轮播结束
//------------------------------------设置鼠标进来就停止开始
box.onmouseover = function() {
clearInterval(timer);
};
//------------------------------------设置鼠标进来就停止结束
//------------------------------------设置鼠标出去就停止开始
box.onmouseout = function() {
timer = setInterval(function() {
right.onclick();
}, 1000);
};
//------------------------------------设置鼠标出去就停止结束
}看完上述内容，你们掌握利用原生JavaScript怎么实现一个pc端的轮播图效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。