jQuery手动点击实现图片轮播特效

下面是详细讲解“jQuery手动点击实现图片轮播特效”的完整攻略：

步骤一：创建HTML结构

首先需要在HTML中创建图片轮播需要的结构，比如下面这一段：

<div id="slider">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

其中，id为slider的div是图片轮播的容器，内部包含若干个img标签，每个img标签对应一张轮播图片。

步骤二：设置CSS样式

接下来需要为图片轮播容器和图片设置样式，包括容器宽度、高度、溢出隐藏等等。比如下面这段CSS样式：

#slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

#slider img {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
}

其中，#slider的样式设置容器宽度为500px，高度为300px，同时设置了溢出隐藏和相对定位；#slider img的样式设置每张图片相对容器绝对定位，同时宽度、高度和容器相同。

步骤三：实现JavaScript功能

最后需要使用jQuery实现点击按钮切换图片的功能。具体实现步骤如下：

1. 定义变量和控件元素

// 当前图片索引
var current = 0;
// 轮播图片总数
var total = $('#slider img').length;
// 左右按钮控件元素
var prev = $('<a class="prev">Prev</a>');
var next = $('<a class="next">Next</a>');
// 图片容器元素
var container = $('#slider');

上面的代码定义了四个变量，分别是当前图片索引、轮播图片总数、左右按钮控件元素和图片容器元素。

1. 添加左右按钮控件元素

container.append(prev);
container.append(next);

添加左右按钮控件元素到图片容器元素。

1. 实现按钮点击事件

prev.click(function() {
  current--;
  if (current < 0) {
    current = total - 1;
  }
  $('#slider img').hide();
  $('#slider img:nth-child(' + (current+1) + ')').show();
});

next.click(function() {
  current++;
  if (current >= total) {
    current = 0;
  }
  $('#slider img').hide();
  $('#slider img:nth-child(' + (current+1) + ')').show();
});

上面的代码分别为左右按钮添加点击事件，点击按钮后会修改当前图片索引并根据当前索引显示对应的轮播图片。

示例一：实现自动轮播

在实现按钮点击事件的基础上，也可以实现每隔一段时间自动切换下一张图片。具体实现代码如下：

setInterval(function() {
  current++;
  if (current >= total) {
    current = 0;
  }
  $('#slider img').hide();
  $('#slider img:nth-child(' + (current+1) + ')').show();
}, 3000);

上面的代码通过setInterval函数每隔3秒钟自动切换到下一张图片，实现自动轮播效果。

示例二：添加图片缩略图

除了添加左右按钮控件元素外，也可以添加图片缩略图来方便用户浏览不同的轮播图片。具体实现代码如下：

<div id="slider">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  <div class="pager">
    <a href="#"><img src="img1.jpg"></a>
    <a href="#"><img src="img2.jpg"></a>
    <a href="#"><img src="img3.jpg"></a>
  </div>
</div>

#slider {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 300px;
}

#slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 300px;
}

.pager {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -75px;
}

.pager img {
  width: 30px;
  height: 20px;
  margin: 0 10px;
  border: 2px solid #ccc;
}

.pager .active img {
  border-color: #f00;
}

var pager = $('<div class="pager"></div>');
for (var i = 0; i < total; i++) {
  var thumb = $('<img src="img'+(i+1)+'.jpg">');
  thumb.click(function(index) {
    return function() {
      current = index;
      $('#slider img').hide();
      $('#slider img:nth-child(' + (current+1) + ')').show();
      pager.find('a').removeClass('active');
      pager.find('a:nth-child(' + (current+1) + ')').addClass('active');
    }
  }(i));
  pager.append($('<a href="#"></a>').html(thumb));
}
pager.find('a:nth-child(1)').addClass('active');
container.append(pager);

上面的代码添加了一个名为pager的元素，用来包含图片缩略图，同时为每个图片缩略图添加了点击事件。点击缩略图后会切换到对应的轮播图片，同时显示对应缩略图为选中状态。