实现jquery焦点图的过程中，我们可以使用已有的插件，也可以自己编写代码实现。下面分别讲解两种方式的实现方法。

使用已有的插件

如果我们使用已有的插件，可以减少编写代码的工作量，同时可以获得更为稳定和成熟的实现方式。

引入插件

首先，我们需要引入一个jquery焦点图的插件，例如bxslider。

<link href="//cdn.bootcss.com/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bxslider/4.2.12/jquery.bxslider.min.js"></script>

编写html代码

然后，我们需要在html中编写图片轮播的代码，例如：

<ul class="bxslider">
  <li><img src="img/slider1.jpg" /></li>
  <li><img src="img/slider2.jpg" /></li>
  <li><img src="img/slider3.jpg" /></li>
</ul>

初始化插件

最后，我们需要在js中进行插件的初始化，例如：

$(document).ready(function(){
  $('.bxslider').bxSlider({
    auto: true,
    pager: false,
    controls: true
  });
});

其中，auto表示是否自动轮播，pager表示是否显示分页器，controls表示是否显示左右控制按钮。

这样，我们就完成了一个简单的jquery焦点图的制作。

自己编写代码

如果我们想要自己编写代码实现jquery焦点图，可以按照以下步骤进行。

编写html代码

首先，我们需要在html中设置图片的容器，例如：

<div class="slider-wrapper">
  <div class="slider">
    <img src="img/slider1.jpg" />
    <img src="img/slider2.jpg" />
    <img src="img/slider3.jpg" />
  </div>
</div>

其中，slider-wrapper表示图片轮播的外层容器，slider表示图片轮播的容器，img表示要轮播的图片。

初始化相关变量

然后，我们需要在js中初始化相关的变量，例如：

var i = 0;                  // 当前显示的图片索引
var $slider = $('.slider'); // 图片轮播的容器
var imgCount = $slider.find('img').length; // 图片的数量
var sliderWidth = imgCount * 640;  // 图片轮播的宽度（每张图宽度为640px）

其中，i表示当前显示的图片索引，$slider表示图片轮播的容器，imgCount表示图片的数量，sliderWidth表示图片轮播的宽度（每张图宽度为640px）。

实现图片轮播

最后，我们就可以通过setInterval函数实现图片轮播的效果，例如：

setInterval(function(){
  i++;

  if(i === imgCount){
    i = 0;
    $slider.css('left', 0);
  }

  $slider.animate({
    'left': -i * 640
  });

}, 3000);

其中，setInterval函数表示图片轮播的间隔时间，i++表示切换到下一张图片，if语句表示如果已经轮播完毕，则重新回到第一张图片，并将图片轮播容器设置回最初状态，$slider.animate函数则表示切换图片的动画效果。

这样，我们就完成了一个简单的jquery焦点图的制作。

示例说明

以下是两个示例展示了如何使用bxslider插件和自己编写代码实现jquery焦点图，供参考。

示例1：使用bxslider插件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jquery焦点图-使用插件</title>
  <link href="//cdn.bootcss.com/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet">
  <script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>
<body>
  <ul class="bxslider">
    <li><img src="img/slider1.jpg" /></li>
    <li><img src="img/slider2.jpg" /></li>
    <li><img src="img/slider3.jpg" /></li>
  </ul>
<script>
  $(document).ready(function(){
    $('.bxslider').bxSlider({
      auto: true,
      pager: false,
      controls: true
    });
  });
</script>
</body>
</html>

在该示例中，我们使用了bxslider插件来实现图片的轮播效果，非常简单。

示例2：自己编写代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jquery焦点图-自己编写代码</title>
  <style>
    .slider-wrapper {
      width: 640px;
      height: 320px;
      overflow: hidden;
    }
    .slider {
      position: relative;
      left: 0;
      top: 0;
      width: 9999px;
      height: 100%;
    }
    .slider img {
      float: left;
      width: 640px;
      height: 320px;
    }
  </style>
  <script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  <script>
    $(document).ready(function(){

      var i = 0;
      var $slider = $('.slider');
      var imgCount = $slider.find('img').length;
      var sliderWidth = imgCount * 640;

      setInterval(function(){
        i++;

        if(i === imgCount){
          i = 0;
          $slider.css('left', 0);
        }

        $slider.animate({
          'left': -i * 640
        });

      }, 3000);

    });
  </script>
</head>
<body>
  <div class="slider-wrapper">
    <div class="slider">
      <img src="img/slider1.jpg" />
      <img src="img/slider2.jpg" />
      <img src="img/slider3.jpg" />
    </div>
  </div>
</body>
</html>

在该示例中，我们自己编写代码实现了焦点图的轮播效果，需要编写稍微多一点的代码，但也非常简单。

以上就是实现jquery焦点图的完整攻略，希望能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：简单实现jquery焦点图 - Python技术站

简单实现jquery焦点图

使用已有的插件

自己编写代码

示例说明

示例1：使用bxslider插件

示例2：自己编写代码

相关文章