原生Javascript和jQuery做轮播图简单例子

下面是具体的攻略：

1. 创建HTML结构

首先，我们需要在HTML中创建轮播图的基本结构，包括一个容器和多张图片。可以使用以下的代码作为基础：

<div id="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <img src="image4.jpg">
</div>

2. 基于原生Javascript做轮播图

步骤1：获取所有图片元素

我们可以使用document.querySelectorAll方法获取所有图片元素，并将它们存储到一个数组中。

var images = document.querySelectorAll('#slider img');

步骤2：设置图片的初始位置

为了让所有图片都排列在同一行，我们需要将它们的position属性设置为absolute，并设置它们的left和top属性。

var left = 0;
for (var i = 0; i < images.length; i++) {
  images[i].style.position = 'absolute';
  images[i].style.left = left + 'px';
  images[i].style.top = '0px';
  left += images[i].width;
}

步骤3：滚动图片

我们可以使用setInterval方法来滚动图片。每隔一段时间，我们将所有图片向左移动一个固定的距离，当最后一张图片滚动到左侧时，我们将它移到容器最右侧。

var intervalId = setInterval(function() {
  var firstImage = images[0];
  var container = firstImage.parentNode;

  var newLeft = parseInt(firstImage.style.left) - 500;

  if (newLeft < -container.clientWidth) {
    container.appendChild(firstImage);
    firstImage.style.left = (left + firstImage.width) + 'px';
  } else {
    firstImage.style.left = newLeft + 'px';
  }
}, 2000);

3. 基于jQuery做轮播图

步骤1：引入jQuery库

首先，我们需要在HTML文件中引入jQuery库，例如：

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

步骤2：获取所有图片元素

我们可以使用jQuery的选择器来获取所有图片元素。

var images = $('#slider img');

步骤3：设置图片的初始位置

我们可以使用jQuery的css方法来设置图片的位置。

var left = 0;
images.each(function() {
  $(this).css({
    'position': 'absolute',
    'left': left + 'px',
    'top': '0px'
  });
  left += $(this).width();
});

步骤4：滚动图片

我们可以使用jQuery的animate方法来滚动图片。

setInterval(function() {
  var firstImage = images.first();
  var container = firstImage.parent();

  var newLeft = parseInt(firstImage.css('left')) - 500;

  if (newLeft < -container.width()) {
    container.append(firstImage);
    firstImage.css('left', (left + firstImage.width()) + 'px');
  } else {
    firstImage.animate({
      'left': newLeft + 'px'
    }, 500);
  }
}, 2000);

示例说明

在这里，我提供了两个例子，一个基于原生Javascript，一个基于jQuery。它们的实现方法有所不同，但是实现的效果是相同的。通过这两个例子，我们可以学习到如何使用原生Javascript或者jQuery来实现一个简单的轮播图。

值得注意的是，这里的代码只是一个简单的例子，实际上，一个轮播图需要考虑更多的因素，比如动画效果、自动播放和用户输入等。如果需要实现更强大的轮播图，可以借鉴一些轮播图插件或者库，例如swiper.js、slick等。