JS焦点图,JS 多个页面放多个焦点图的实例

JS焦点图的实现方式有很多，但常用的方式是通过jQuery插件或原生JS实现。下面将介绍两种实现方式，分别是jQuery插件Slick和原生JS实现。

jQuery插件Slick实现

使用jQuery插件Slick实现焦点图非常简单，只需要在页面中引入Slick插件和相关CSS样式，然后对相关的HTML元素进行配置即可。

以下是一个简单的示例：

1. 引入Slick插件

<!-- 引入Slick插件CSS样式文件 -->
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>

<!-- 引入Slick插件JS文件 -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

1. 配置HTML元素

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

1. 初始化并配置Slick插件

$(document).ready(function(){
  $('.slider').slick({
    dots: true, //显示小圆点导航
    autoplay: true, //自动播放
    autoplaySpeed: 3000, //自动播放速度
    arrows: true //显示左右箭头导航
  });
});

通过以上配置，我们就实现了一个简单的焦点图。

原生JS实现

如果不想依赖jQuery插件，也可以使用原生JS实现焦点图。以下是一个示例：

1. 配置HTML元素

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

1. CSS样式设置

/* 隐藏所有图片 */
.slider img {
  display: none;
}

/* 显示当前焦点图片 */
.slider img.active {
  display: block;
}

1. 编写JS代码

// 获取所有的图片元素
var images = document.querySelectorAll('.slider img');

// 设置默认焦点图片
var currentImageIndex = 0;
images[currentImageIndex].classList.add('active');

// 自动播放焦点图
var interval = setInterval(function() {
  // 隐藏当前焦点图片
  images[currentImageIndex].classList.remove('active');

  // 切换到下一张图片
  currentImageIndex = (currentImageIndex + 1) % images.length;

  // 显示下一张图片
  images[currentImageIndex].classList.add('active');
}, 3000);

通过以上配置和代码，我们实现了一个原生JS实现的焦点图。

以上是两个简单的示例，实际开发中需要根据具体需求进行配置和代码调整。