JQuery自适应窗口大小轮播图怎么加上自动轮播

如果轮播图宽度占满全屏，要实现自动轮播功能，可以按照以下步骤操作。首先，定义变量以跟踪当前索引，并找到包含轮播图的元素及其子元素的总数。

例如，假设HTML结构如下：

<div id="banner">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
</ul>
</div>

可以使用以下JavaScript代码实现自动轮播功能：

var index = 0;

var oBanner = $('#banner');

var iLiLength = oBanner.find('li').length;

setInterval(function() {

if (index > iLiLength) {

index = 0;

}

index++;

oBanner.find('ul').animate({ left: -index * $(window).width() }, 1000);

}, 1000);

这段代码首先定义了一个变量index来跟踪当前的索引，接着通过jQuery选择器找到包含轮播图的div和ul元素。然后，设置了一个定时器，每1000毫秒执行一次内部函数。在函数内部，检查当前索引是否超过了li元素的总数。如果超过了，则将索引重置为0。接着，将索引加1，然后通过animate方法平滑移动ul元素的位置，使其向左移动指定的距离。

这种方法可以实现全屏轮播图的自动轮播效果，适合用于展示多个内容项，如图片、文字或视频等。