本文实例为大家分享了js实现左右轮播图的具体代码，供大家参考，具体内容如下

我的轮播图功能有：自动播放、点击焦点切换和点击左右按钮切换

效果图：

自动轮播

点击焦点切换

点击左右按钮切换

注意：本文用带背景颜色的li标签指代图片，有需要的话可以将图片插入li标签内

思路：

基础布局和css样式

(1) 给盛放要轮播的图片的盒子绝对定位

js中的代码

(2) 复制第一张图片放在盒子最后，复制最后一张图片放在盒子最前，以保证轮播图左右滑动效果(否则看起来会有一点卡顿)

(3)设置盒子位置，通过移动这个盒子的位置，产生图片移动的效果，用定时器设置轮播效果

(4)设置鼠标划入停播事件，设置按钮点击事件，设置焦点点击事件

(5)解决点击太快定时器混乱问题，解决切屏后定时器混乱问题

一 布局

• 1
• 2
• 3

二 样式

* {

margin: 0;

padding: 0;

}

ul,

ol,

li {

list-style: none;

}

a {

text-decoration: none;

}

section {

width: 300px;

margin: 30px auto;

height: 200px;

border: 5px solid;

position: relative;

/* overflow: hidden; */

}

ul {

width: 300%;

height: 100%;

text-align: center;

line-height: 200px;

font-size: 100px;

position: absolute;

top: 0;

left: 0;

}

li {

width: 300px;

height: 100%;

float: left;

}

ol {

width: 150px;

height: 20px;

position: absolute;

bottom: 20px;

left: 50%;

transform: translateX(-50%);

border-radius: 15px;

display: flex;

justify-content: space-evenly;

align-items: center;

}

ol li {

width: 15px;

height: 15px;

background-color: ivory;

border-radius: 50%;

}

.active {

background-color: greenyellow;

}

三 原生js

1、获取元素

//1、获取盛放图片的盒子和盛放焦点的盒子

let ul = document.querySelector('ul')