jQuery实现选项联动轮播效果【附实例】

下面是“jQuery实现选项联动轮播效果【附实例】”的完整攻略，我将以分步骤的形式详细讲解过程。

步骤1：准备工作

首先，我们需要在html文件中引入jQuery和轮播插件bxSlider的js和css文件，以及我们编写的css和html文件。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery实现选项联动轮播效果</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/jquery.bxslider.css">
  </head>
  <body>
    <div class="list-wrap">
      <ul class="list">
        <li class="item" data-type="all">All</li>
        <li class="item" data-type="web">Web</li>
        <li class="item" data-type="ui">UI</li>
        <li class="item" data-type="graphic">Graphic</li>
        <li class="item" data-type="print">Print</li>
        <li class="item" data-type="motion">Motion</li>
        <li class="item" data-type="3d">3D</li>
      </ul>
      <ul class="slider-list">
        <li data-type="web">
          <img src="http://placehold.it/300x200">
          <p>Web Design</p>
        </li>
        <li data-type="ui">
          <img src="http://placehold.it/300x200">
          <p>User Interface</p>
        </li>
        <li data-type="graphic">
          <img src="http://placehold.it/300x200">
          <p>Graphic Design</p>
        </li>
        <li data-type="print">
          <img src="http://placehold.it/300x200">
          <p>Print Design</p>
        </li>
        <li data-type="motion">
          <img src="http://placehold.it/300x200">
          <p>Motion Design</p>
        </li>
        <li data-type="3d">
          <img src="http://placehold.it/300x200">
          <p>3D Design</p>
        </li>
      </ul>
    </div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery.bxslider.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

步骤2：实现联动效果

接下来，我们需要编写jQuery代码实现联动效果。首先，我们需要监听选项卡的点击事件，根据点击的选项卡值来显示对应的轮播图片。代码如下：

$('.list .item').click(function(e) {
  var type = $(e.target).data('type');
  $('.slider-list').bxSlider().destroySlider();
  if (type === 'all') {
    $('.slider-list li').show();
  } else {
    $('.slider-list li').hide();
    $('.slider-list li[data-type="' + type + '"]').show();
  }
  $('.slider-list').bxSlider({
    pager: false,
    controls: false,
    slideWidth: 300,
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 30,
    adaptiveHeight: true
  });
});

代码中，我们先给每个选项卡元素绑定了一个点击事件。在点击事件中，我们首先获取被点击元素的data-type值，然后根据这个值来控制轮播图的展示。如果data-type是all，表示需要显示所有的轮播图，我们将所有的li元素都显示出来。否则，我们将所有的li元素隐藏起来，然后只显示data-type等于被点击元素的data-type的li元素。之后，我们还要重新初始化轮播图组件bxSlider。

接下来，我们需要选中轮播图容器.slider-list，在其上调用bxSlider插件，设置相关参数实现轮播效果。代码如下：

$('.slider-list').bxSlider({
  pager: false,
  controls: false,
  slideWidth: 300,
  minSlides: 1,
  maxSlides: 3,
  moveSlides: 1,
  slideMargin: 30,
  adaptiveHeight: true
});

代码中，我们设置了轮播图不显示分页器和控制按钮，图片的宽度为300px，可以一次性显示的最小和最大图片数量为1和3张，移动图片的数量为1，图片之间的间隔为30px，轮播图组件的高度自适应上一个图片的高度。这样，我们就实现了选项卡和轮播图的联动效果。

步骤3：完整示例

最后，我们再给出完整的示例代码：

CSS：

.list-wrap {
  margin-top: 50px;
  text-align: center;
}
.list-wrap .list {
  display: inline-block;
  margin-right: 20px;
  padding: 0;
  list-style: none;
}
.list-wrap .list .item {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ddd;
  color: #333;
  cursor: pointer;
  border-radius: 20px;
  margin-right: 10px;
  font-size: 16px;
}
.list-wrap .list .item:hover {
  background-color: #333;
  color: #fff;
}
.list-wrap .slider-list {
  margin-top: 50px;
  text-align: center;
}
.list-wrap .slider-list li {
  display: inline-block;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
  background-color: #eee;
  margin-right: 30px;
  border-radius: 10px;
}
.list-wrap .slider-list li p {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
}

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery实现选项联动轮播效果</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/jquery.bxslider.css">
  </head>
  <body>
    <div class="list-wrap">
      <ul class="list">
        <li class="item" data-type="all">All</li>
        <li class="item" data-type="web">Web</li>
        <li class="item" data-type="ui">UI</li>
        <li class="item" data-type="graphic">Graphic</li>
        <li class="item" data-type="print">Print</li>
        <li class="item" data-type="motion">Motion</li>
        <li class="item" data-type="3d">3D</li>
      </ul>
      <ul class="slider-list">
        <li data-type="web">
          <img src="http://placehold.it/300x200">
          <p>Web Design</p>
        </li>
        <li data-type="ui">
          <img src="http://placehold.it/300x200">
          <p>User Interface</p>
        </li>
        <li data-type="graphic">
          <img src="http://placehold.it/300x200">
          <p>Graphic Design</p>
        </li>
        <li data-type="print">
          <img src="http://placehold.it/300x200">
          <p>Print Design</p>
        </li>
        <li data-type="motion">
          <img src="http://placehold.it/300x200">
          <p>Motion Design</p>
        </li>
        <li data-type="3d">
          <img src="http://placehold.it/300x200">
          <p>3D Design</p>
        </li>
      </ul>
    </div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery.bxslider.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

JavaScript：

$('.list .item').click(function(e) {
  var type = $(e.target).data('type');
  $('.slider-list').bxSlider().destroySlider();
  if (type === 'all') {
    $('.slider-list li').show();
  } else {
    $('.slider-list li').hide();
    $('.slider-list li[data-type="' + type + '"]').show();
  }
  $('.slider-list').bxSlider({
    pager: false,
    controls: false,
    slideWidth: 300,
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 30,
    adaptiveHeight: true
  });
});

这样，我们就完成了“jQuery实现选项联动轮播效果”的完整攻略，示例中展示了选项卡和轮播图的联动效果及其具体实现方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现选项联动轮播效果【附实例】 - Python技术站

jQuery实现选项联动轮播效果【附实例】

步骤1：准备工作

步骤2：实现联动效果

步骤3：完整示例

相关文章