JS原生手写轮播图效果
作者：饭啊饭°
这篇文章主要为大家详细介绍了JS原生手写轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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 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;
}
/* .item.active {
opacity: 1;
z-index: 20;
} */
.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>
/* 1.获取元素 */
// 整个轮播图范围
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;
/* 2.鼠标经过轮播图，左右按钮出现，离开则按钮消失 */
wrap.addEventListener('mouseenter',function(){
left.style.display = 'block'
right.style.display = 'block'
});
wrap.addEventListener('mouseleave',function(){
left.style.display = 'none'
right.style.display = 'none'
})
/* 3.克隆第一张图片放到ul最后面 */
var first = ul.children[0].cloneNode(true)
ul.appendChild(first)
items = document.querySelectorAll('.item')
/* 4. 记录当前展示的是第几张图片 */
var index = 0;
/* 5.移除所有的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"
}
}
/* 6.为当前index加入active */
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";
}
}
/* 7.点击左右按钮触发修改index的事件 */
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();
})
/* 8.点击圆点更改轮播图 */
for(var i=0;i<points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index')
index = pointIndex;
setActive();
})
}
/* 9.计时器 */
var timer
function play() {
timer = setInterval(() => {
goright()
}, 2000)
}
play()
//移入清除计时器r
wrap.onmouseover = function () {
clearInterval(timer)
}
//移出启动计时器
wrap.onmouseleave = function () {
play()
}
</script>
</body>
</html>三、继续优化思路
1、下方小圆点根据图片个数自动生成；
2、利用节流控制左右切换的速度。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。