jQuery焦点图切换简易插件制作过程全纪录

下面我将详细讲解“jQuery焦点图切换简易插件制作过程全纪录”。

一、前言

做一个好用的网站，除了有好的设计外，交互效果和动画效果会让用户的体验更好。当我们需要制作焦点图时，可以选择使用第三方的插件。但为了更好地理解焦点图的制作原理，我们可以自己来手写一个简易焦点图切换插件。

二、需求分析

在开始编码之前，我们需要考虑一下插件的需求：

可以实现无缝轮播焦点图；
支持滑动切换和按钮切换；
可以设置轮播的速度和切换间隔。

三、技术选型

根据需求分析，我们需要用到以下技术：

HTML、CSS
jQuery
JavaScript

四、代码实现

1. HTML结构

我们先来看一下需要实现的HTML结构。我们需要一个容器元素，多个图片元素，以及左右按钮和导航按钮。

<div id="slider">
  <ul class="slider-list">
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/2.jpg" alt=""></li>
    <li><img src="img/3.jpg" alt=""></li>
    <li><img src="img/4.jpg" alt=""></li>
    <li><img src="img/5.jpg" alt=""></li>
    <li><img src="img/6.jpg" alt=""></li>
  </ul>
  <a class="slider-btn slider-btn-prev" href="javascript:;"></a>
  <a class="slider-btn slider-btn-next" href="javascript:;"></a>
  <div class="slider-nav">
    <a href="javascript:;" class="slider-nav-item"></a>
    <a href="javascript:;" class="slider-nav-item"></a>
    <a href="javascript:;" class="slider-nav-item"></a>
    <a href="javascript:;" class="slider-nav-item"></a>
    <a href="javascript:;" class="slider-nav-item"></a>
    <a href="javascript:;" class="slider-nav-item"></a>
  </div>
</div>

2. CSS样式

接下来我们给这些元素添加CSS样式。

#slider {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.slider-list {
  width: 4800px;
  height: 400px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.slider-list li {
  width: 800px;
  height: 400px;
  float: left;
}

.slider-btn {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  width: 50px;
  height: 50px;
  background: url(images/slider-btn.png) no-repeat;
  cursor: pointer;
}

.slider-btn-prev {
  left: 10px;
}

.slider-btn-next {
  right: 10px;
}

.slider-nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -90px;
}

.slider-nav-item {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: url(images/slider-nav.png) no-repeat;
  cursor: pointer;
}

.slider-nav-item.active {
  background-position: -20px 0;
}

3. JavaScript代码

最后我们来看一下最重要的JavaScript代码。我们使用jQuery来实现：

(function($) {
  $.fn.slider = function(options) {
    // 默认配置
    var defaults = {
      speed: 1000, // 切换速度
      interval: 3000 // 自动切换间隔
    };
    // 合并用户配置
    var options = $.extend(defaults, options);

    // 变量初始化
    var i = 0; // 当前图片索引
    var timer; // 定时器

    // 获取元素
    var $slider = this; // 根容器元素
    var $sliderList = $slider.find('.slider-list'); // 图片列表容器
    var $sliderItems = $sliderList.find('li'); // 图片列表
    var $sliderBtnPrev = $slider.find('.slider-btn-prev'); // 左按钮
    var $sliderBtnNext = $slider.find('.slider-btn-next'); // 右按钮
    var $sliderNav = $slider.find('.slider-nav'); // 导航容器
    var $sliderNavItems = $sliderNav.find('.slider-nav-item'); // 导航

    // 设置样式和默认状态
    $slider.css('position', 'relative');
    $sliderList.css({
      'position': 'absolute',
      'left': 0,
      'top': 0
    });
    $sliderItems.first().clone().appendTo($sliderList);
    $sliderList.css('width', $sliderItems.length * 100 + '%');
    $sliderItems.css('width', 100 / $sliderItems.length + '%');
    $sliderNavItems.first().addClass('active');

    // 鼠标移入停止自动轮播
    $slider.hover(function() {
      clearInterval(timer);
    }, function() {
      timer = setInterval(slider, options.interval);
    });

    // 左按钮点击事件
    $sliderBtnPrev.click(function() {
      i--;
      if (i == -1) {
        $sliderList.css('left', -$sliderItems.length * 100 + '%');
        i = $sliderItems.length - 2;
      }
      showNav(i);
      $sliderList.stop().animate({
        'left': -i * 100 + '%'
      }, options.speed);
    });

    // 右按钮点击事件
    $sliderBtnNext.click(function() {
      i++;
      if (i == $sliderItems.length) {
        $sliderList.css('left', 0);
        i = 1;
      }
      showNav(i);
      $sliderList.stop().animate({
        'left': -i * 100 + '%'
      }, options.speed);
    });

    // 导航条点击事件
    $sliderNavItems.click(function() {
      var index = $(this).index();
      i = index;
      showNav(i);
      $sliderList.stop().animate({
        'left': -i * 100 + '%'
      }, options.speed);
    });

    // 显示导航条当前状态
    function showNav(index) {
      $sliderNavItems.eq(index).addClass('active').siblings().removeClass('active');
    }

    // 自动轮播
    function slider() {
      i++;
      if (i == $sliderItems.length) {
        $sliderList.css('left', 0);
        i = 1;
      }
      showNav(i);
      $sliderList.stop().animate({
        'left': -i * 100 + '%'
      }, options.speed);
    }

    // 启动自动轮播
    timer = setInterval(slider, options.interval);
  }
})(jQuery);

五、示例说明

下面我们来看两个示例，演示一下我们编写的焦点图切换插件。

示例一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>示例1</title>
  <style>
    #slider {
      width: 800px;
      height: 400px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }

    .slider-list {
      width: 4800px;
      height: 400px;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    .slider-list li {
      width: 800px;
      height: 400px;
      float: left;
    }

    .slider-btn {
      position: absolute;
      top: 50%;
      margin-top: -25px;
      width: 50px;
      height: 50px;
      background: url(images/slider-btn.png) no-repeat;
      cursor: pointer;
    }

    .slider-btn-prev {
      left: 10px;
    }

    .slider-btn-next {
      right: 10px;
    }

    .slider-nav {
      position: absolute;
      bottom: 10px;
      left: 50%;
      margin-left: -90px;
    }

    .slider-nav-item {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      background: url(images/slider-nav.png) no-repeat;
      cursor: pointer;
    }

    .slider-nav-item.active {
      background-position: -20px 0;
    }
  </style>
</head>
<body>
  <div id="slider">
    <ul class="slider-list">
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
      <li><img src="img/4.jpg" alt=""></li>
      <li><img src="img/5.jpg" alt=""></li>
      <li><img src="img/6.jpg" alt=""></li>
    </ul>
    <a class="slider-btn slider-btn-prev" href="javascript:;"></a>
    <a class="slider-btn slider-btn-next" href="javascript:;"></a>
    <div class="slider-nav">
      <a href="javascript:;" class="slider-nav-item"></a>
      <a href="javascript:;" class="slider-nav-item"></a>
      <a href="javascript:;" class="slider-nav-item"></a>
      <a href="javascript:;" class="slider-nav-item"></a>
      <a href="javascript:;" class="slider-nav-item"></a>
      <a href="javascript:;" class="slider-nav-item"></a>
    </div>
  </div>
  <script src="jquery-3.4.1.min.js"></script>
  <script src="slider.js"></script>
  <script>
    $(function() {
      $('#slider').slider();
    });
  </script>
</body>
</html>

示例二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>示例2</title>
  <style>
    #slider2 {
      width: 600px;
      height: 300px;
      margin: 30px auto 0;
      position: relative;
      overflow: hidden;
    }

    .slider-list {
      width: 1800px;
      height: 300px;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    .slider-list li {
      width: 600px;
      height: 300px;
      float: left;
    }

    .slider-btn {
      position: absolute;
      top: 50%;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.5) url(images/slider-btn2.png) no-repeat center center;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .slider-btn-prev {
      left: 20px;
    }

    .slider-btn-next {
      right: 20px;
    }

    .slider-nav {
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -60px;
    }

    .slider-nav-item {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 6px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
    }

    .slider-nav-item.active {
      background-color: #f00;
    }

    .slider-list li img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div id="slider2">
    <ul class="slider-list">
      <li><img src="img/7.jpg" alt=""></li>
      <li><img src="img/8.jpg" alt=""></li>
      <li><img src="img/9.jpg" alt=""></li>
    </ul>
    <a class="slider-btn slider-btn-prev" href="javascript:;"></a>
    <a class="slider-btn slider-btn-next" href="javascript:;"></a>
    <div class="slider-nav">
      <a href="javascript:;" class="slider-nav-item"></a>
      <a href="javascript:;" class="slider-nav-item"></a>
      <a href="javascript:;" class="slider-nav-item"></a>
    </div>
  </div>
  <script src="jquery-3.4.1.min.js"></script>
  <script src="slider.js"></script>
  <script>
    $(function() {
      $('#slider2').slider({
        speed: 500,
        interval: 2000
      });
    });
  </script>
</body>
</html>

六、总结

在本文中，我们借助 jQuery，实现了一个简易的焦点图切换插件。我们通过需求分析和技术选型，逐步实现了该插件。对于自己编写的插件，我们可以私人使用或者通过发布到 jQuery 插件库供他人使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery焦点图切换简易插件制作过程全纪录 - Python技术站