JS原生手写轮播图效果
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了JS原生手写轮播图效果的具体代码，供大家参考，具体内容如下
前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍如何用原生JS手写轮播图。
一、手写初级轮播图
功能分析
1、初级轮播图功能介绍：①左右两端有左右按钮；②下方有小球指示当前是第几张图片；③无切换效果；④如果两秒中用户没有点击轮播图，则从左到右自动播放。
2、功能展示：
实现思路
HTML中需要包括一个大盒子class=wrap，为轮播图的盒子。一张一张的图片可以用无序列表存储，左右按钮使用button，下方圆点也用无序列表，并为每一个圆点设置计数器data-index。HTML的代码如下：
<div class="wrap">
<ul class="list">
<li class="item active">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
<ul class="pointList">
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
<li class="point" data-index="3"></li>
<li class="point" data-index="4"></li>
</ul>
<button class="btn" id="leftBtn"><</button>
<button class="btn" id="rightBtn">></button>
</div>CSS中，给wrap盒子一个宽高。list盒子和它同宽同高。每一张图片充满盒子，并且都用绝对定位固定在wrap盒子里，让他们有不同的颜色，初始透明度都是0即全透明，并且，哪个需要展示，哪个的z-index就变大，并且透明度改为1。左右按钮直接使用定位固定在左右两端，小圆点内部使用浮动，再用定位固定在下端。
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
width: 800px;
height: 400px;
position: relative;
}
.list{
width: 800px;
height: 400px;
position: relative;
}
.item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
opacity: 0;
}
.item:nth-child(1){
background-color: skyblue;
}
.item:nth-child(2){
background-color: yellowgreen
}
.item:nth-child(3){
background-color: rebeccapurple;
}
.item:nth-child(4){
background-color: pink;
}
.item:nth-child(5){
background-color: orange;
}
.item.active {
opacity: 1;
z-index: 20;
}
.btn {
width: 50px;
height: 100px;
position: absolute;
top: 50%;
transform:translate(0,-50%);
z-index: 200;
}
#leftBtn {
left: 0;
}
#rightBtn {
right: 0;
}
.pointList {
height: 10px;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 200;
}
.point {
width: 10px;
height: 10px;
background-color: antiquewhite;
float: left;
margin-left: 8px;
border-style: solid;
border-radius: 100%;
border-width: 2px;
border-color: slategray;
}
.point.active {
background-color: cadetblue;
}JS的实现思路如下：
1.获取元素：包括图片、圆点、按钮、轮播图大盒子
2.需要一个变量index记录当前图片的索引，并且在每次点击的时候要先将样式清空，再根据索引重新赋值（排他思想）
3.点击左右按钮的时候，只需要判断是否为第一张或者最后一张，然后进行+1 -1操作即可。
4.点击小圆点时，需要记录点击的圆点的data-index，赋值给Index，然后再执行
5.定义计时器，当鼠标在wrap内，就取消计时，不在wrap内，就开始计时，两秒以后自动播放。
JS整体代码：
// 轮播图图片
let items = document.querySelectorAll('.item')
// 下方圆点
let points = document.querySelectorAll('.point')
// 左右按钮
let left = document.querySelector('#leftBtn')
let right = document.querySelector('#rightBtn')
// 轮播图盒子
let wrap = document.querySelector('.wrap')
// 记录当前展示的是第几张图片
var index = 0;
// 移除所有的active
var removeActive = function(){
for(var i=0;i<items.length;i++){
items[i].className = "item"
}
for(var i=0;i<points.length;i++){
points[i].className = "point"
}
}
// 为当前index加入active
var setActive = function(){
removeActive();
items[index].className = "item active";
points[index].className = "point active";
}
// 点击左右按钮触发修改index的事件
var goleft = function(){
if(index==0){
index = 4;
}else{
index--;
}
setActive();
}
var goright = function(){
if(index==4){
index = 0;
}else{
index++;
}
setActive();
}
left.addEventListener('click',function(){
goleft();
})
right.addEventListener('click',function(){
goright();
})
// 点击小圆点
for(var i=0;i<points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index')
index = pointIndex;
setActive();
})
}
//计时器
var timer
function play() {
timer = setInterval(() => {
goright()
}, 2000)
}
play()
//移入清除计时器r
wrap.onmouseover = function () {
clearInterval(timer)
}
//移出启动计时器
wrap.onmouseleave = function () {
play()
}二、优化轮播图
增加的功能
1、鼠标经过轮播图再出现左右按钮；
2、图片有左右滚动的效果，看起来是连续的。
3、功能展示：
实现要点
1.所有的图片不应该叠放，而是应该拼接起来，这个可以在CSS中修改。
2.因为是连续播放，需要拷贝第一张图片到轮播图的最后，这样最后一张到第一张的效果才会连续。
3.连续移动的效果是通过缓动动画实现的：移动的步长由大到小，最后慢慢停下来。
最后完整的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script class="lazy" data-src="animate.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
width: 800px;
height: 400px;
background-color: pink;
position: relative;
overflow: hidden;
}
.list{
width: 600%;
height: 400px;
position: absolute;
left:0;
}
.item {
width: 800px;
height: 100%;
float: left;
}
.item:nth-child(1){
background-color: skyblue;
}
.item:nth-child(2){
background-color: yellowgreen
}
.item:nth-child(3){
background-color: rebeccapurple;
}
.item:nth-child(4){
background-color: pink;
}
.item:nth-child(5){
background-color: orange;
}
.item:nth-child(6){
background-color: skyblue;
}
.btn {
width: 50px;
height: 100px;
position: absolute;
top: 50%;
transform:translate(0,-50%);
z-index: 200;
display: none;
}
#leftBtn {
left: 0;
}
#rightBtn {
right: 0;
}
.pointList {
height: 10px;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 200;
}
.point {
width: 10px;
height: 10px;
background-color: antiquewhite;
float: left;
margin-left: 8px;
border-style: solid;
border-radius: 100%;
border-width: 2px;
border-color: slategray;
}
.point.active {
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<li class="item">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
<ul class="pointList">
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
<li class="point" data-index="3"></li>
<li class="point" data-index="4"></li>
</ul>
<button class="btn" id="leftBtn"><</button>
<button class="btn" id="rightBtn">></button>
</div>
<script>
// 整个轮播图范围
let wrap = document.querySelector('.wrap')
let ul = document.querySelector('.list')
// 轮播图图片
let items = document.querySelectorAll('.item')
// 下方圆点
let points = document.querySelectorAll('.point')
// 左右按钮
let left = document.querySelector('#leftBtn')
let right = document.querySelector('#rightBtn')
var focusWidth = wrap.offsetWidth;
wrap.addEventListener('mouseenter',function(){
left.style.display = 'block'
right.style.display = 'block'
});
wrap.addEventListener('mouseleave',function(){
left.style.display = 'none'
right.style.display = 'none'
})
var first = ul.children[0].cloneNode(true)
ul.appendChild(first)
items = document.querySelectorAll('.item')
var index = 0;
var removeActive = function(){
for(var i=0;i<items.length;i++){
items[i].className = "item"
}
for(var i=0;i<points.length;i++){
points[i].className = "point"
}
}
var setActive = function(){
removeActive();
// ul.style.left = -(index*focusWidth) + 'px'
animate(ul, -index * focusWidth);
// console.log(index);
// console.log(ul.style.left);
if(index==5) {
points[0].className = "point active";
}else{
points[index].className = "point active";
}
}
var goleft = function(){
if(index==0){
index = 5;
ul.style.left = "-4000px";
}
index--;
setActive();
}
var goright = function(){
if(index==5){
index = 0;
ul.style.left = 0;
}
index++;
setActive();
}
left.addEventListener('click',function(){
goleft();
})
right.addEventListener('click',function(){
goright();
})
for(var i=0;i<points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index')
index = pointIndex;
setActive();
})
}
var timer
function play() {
timer = setInterval(() => {
goright()
}, 2000)
}
play()
//移入清除计时器r
wrap.onmouseover = function () {
clearInterval(timer)
}
//移出启动计时器
wrap.onmouseleave = function () {
play()
}
</script>
</body>
</html>三、继续优化思路
1、下方小圆点根据图片个数自动生成；
2、利用节流控制左右切换的速度。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
