如何将js轮播图从4张改成3张

var banner = document.querySelector('.banner');

var imgBox = banner.querySelector('.banner-img');

var imgs = imgBox.querySelectorAll('img');

var btnBox = banner.querySelector('.banner-btn');

var btns = btnBox.querySelectorAll('span');

var indexBox = banner.querySelector('.banner-index');

var lis = indexBox.querySelectorAll('li');

var bannerWidth = banner.offsetWidth;

var index = 0;

var timer = null;

function move() {

index++;

if (index > imgs.length - 1) {

index = 0;

}

imgBox.style.left = -index * bannerWidth + 'px';

for (var i = 0; i < lis.length; i++) {

lis[i].classList.remove('active');

lis[index].classList.add('active');

}

timer = setInterval(move, 2000);

banner.onmouseover = function() {

clearInterval(timer);

banner.onmouseout = function() {

timer = setInterval(move, 2000);

for (var i = 0; i < btns.length; i++) {

btns[i].onclick = function() {

if (this.className == 'btn-prev') {

index--;

if (index < 0) {

index = imgs.length - 1;

}

} else {

move();

}

imgBox.style.left = -index * bannerWidth + 'px';

for (var i = 0; i < lis.length; i++) {

lis[i].classList.remove('active');

lis[index].classList.add('active');

以上代码实现了一个基本的4张轮播图，包括图片、前后翻页按钮和页码指示器。要将其改成3张轮播图，我们只需将代码中的四个图片对应数据修改为三个即可：

修改为：

这样就可以实现3张轮播图的效果了。需要注意的是，如果轮播图中的图片数量发生变化，还需要修改相关的样式和动画效果。

轮播图js的实现方法

轮播图的实现离不开JavaScript，下面介绍一些常见的实现方法。

原生JavaScript实现

原生JavaScript实现轮播图的方法相对比较复杂，需要对DOM、样式和事件处理等方面有一定的掌握。以下是一个基本的原生JavaScript实现轮播图的代码示例：

var index = 0;

var timer = null;

var banner = document.querySelector('.banner');

var imgBox = banner.querySelector('.banner-img');

var imgs = imgBox.querySelectorAll('img');

var btnBox = banner.querySelector('.banner-btn');

var btns = btnBox.querySelectorAll('span');

function move() {

index++;

if (index > imgs.length - 1) {

index = 0;

imgBox.style.left = -index * 100 + '%';

btns[i].classList.remove('active');

btns[index].classList.add('active');

}

timer = setInterval(move, 2000);

banner.onmouseover = function() {

clearInterval(timer);

banner.onmouseout = function() {

for (var i = 0; i < btns.length; i++) {

btns[i].onclick = function() {

index = this.getAttribute('data-index');

imgBox.style.left = -index * 100 + '%';

for (var i = 0; i < btns.length; i++) {

btns[i].classList.remove('active');

this.classList.add('active');

该代码实现了一个基本的轮播图，包括图片切换、页码指示和前后翻页按钮。需要注意的是，该代码实现的是以百分比为单位的轮播图，可以在样式表中设置图片的宽度为百分比，方便响应式布局。

jQuery实现

jQuery是一个非常常用的JavaScript库，它能够简化JavaScript的编写和操作DOM等操作。以下是一个基本的jQuery实现轮播图的代码示例：

var $banner = $('.banner');

var $imgBox = $('.banner-img');

var $imgs = $imgBox.find('img');

var $btns = $('.banner-btn span');

if (index > $imgs.length - 1) {

$imgBox.animate({left: -index * 100 + '%'}, 500);

$btns.removeClass('active');

$btns.eq(index).addClass('active');

$banner.on('mouseover', function() {

});

$banner.on('mouseout', function() {

$btns.on('click', function() {

index = $(this).index();

$(this).addClass('active');

该代码使用jQuery实现了一个基本的轮播图，包括图片切换、页码指示和前后翻页按钮。与原生JavaScript相比，jQuery编写的代码更加简洁明了。

标签： 轮播图是网站设计中的常见元素 它能够提高网站的美观度和实用性在轮播图