下面我将详细讲解如何实现JS实现非常简单的焦点图切换特效。

1. 理解需求

在动手编写代码之前，我们需要先清楚自己要做什么。根据题目描述，我们需要实现一个简单的焦点图切换特效，其中最基本的要求就是能够自动轮播图片。除此之外，还可以设置左右切换按钮、底部焦点导航等功能，以便用户手动切换图片。

2. HTML结构

在开始编写JS代码之前，我们需要先构建一个基本的HTML结构。可以使用<ul>作为外层容器，每个轮播项使用<li>包裹，并且在最后追加一个与第一个轮播项相同的图片，这样可以无缝循环轮播。例如：

<p class="slider">    <ul class="slider-content">        <li>            <img src="img1.jpg" alt="图片1">        </li>        <li>            <img src="img2.jpg" alt="图片2">        </li>        <li>            <img src="img3.jpg" alt="图片3">        </li>        <!-- 这里追加一个与第一个轮播项相同的图片 -->        <li>            <img src="img1.jpg" alt="图片1">        </li>    </ul></p>

注意，在上述代码中我们给整个轮播图加入了一个父容器，这样可以方便我们对整个轮播图进行样式上的控制。

3. CSS样式

完成HTML结构之后，我们需要对其进行基本的样式控制。特别是对轮播图进行一些定位、尺寸等方面的调整。例如：

.slider {    position: relative;    width: 600px;    height: 300px;    overflow: hidden;}.slider-content {    position: absolute;    left: 0;    top: 0;    width: 2400px; /*每个轮播项宽度为600px，一共4项*/    height: 300px;    padding: 0;    margin: 0;    list-style: none;}.slider-content li {    float: left;    width: 600px;    height: 300px;}.slider-content img {    display: block;    width: 100%;    height: 100%;}

上述代码中，我们对轮播图进行设置了宽度、高度，并对轮播项进行了浮动和大小尺寸的设置。同时，我们对轮播项中的图片进行了占满整个轮播项的调整。

4. JS代码

接下来进入JS编程环节。为了实现自动轮播及手动切换，我们需要编写一定的JS代码。实现的思路包括：

1. 使用计时器实现自动轮播
2. 使用左右箭头实现手动切换
3. 使用底部导航实现手动切换

4.1 自动轮播

实现自动轮播需要使用计时器setInterval()方法，代码如下：

var slider = document.querySelector('.slider');var sliderContent = document.querySelector('.slider-content');//当前播放的位置var currentPosition = 0;setInterval(function () {    currentPosition -= 600; //每次移动一个轮播项的宽度    sliderContent.style.transform = "translateX(" + currentPosition + "px)";}, 2000);

上述代码中，我们定义了一个计时器，使其每隔2秒钟执行一次。在计时器中，我们将轮播图向左移动一个轮播项的宽度，并将移动的距离通过设置transform: translateX()样式实现。注意，我们将变量currentPosition初始化为0，而不是一个负数。这是因为我们在轮播到最后一项的时候，需要将当前位置重新设置为0，以实现循环轮播的效果。

4.2 手动切换

实现手动切换需要使用到addEventListener()方法，对左右箭头和底部导航按钮绑定事件。代码如下：

var prevBtn = document.querySelector('#prev-btn');var nextBtn = document.querySelector('#next-btn');var navDots = document.querySelectorAll('.nav-dot');//左箭头按钮事件prevBtn.addEventListener('click', function () {    currentPosition += 600;    if (currentPosition > 0) {        currentPosition = -1800; //回到最后一个轮播项    }    sliderContent.style.transform = "translateX(" + currentPosition + "px)";});//右箭头按钮事件nextBtn.addEventListener('click', function () {    currentPosition -= 600;    if (currentPosition < -2400) {        currentPosition = 0; //回到第一个轮播项    }    sliderContent.style.transform = "translateX(" + currentPosition + "px)";});//底部导航按钮事件for (var i = 0; i < navDots.length; i++) {    navDots[i].addEventListener('click', function () {        var index = Array.from(navDots).indexOf(this);        currentPosition = -index * 600;        sliderContent.style.transform = "translateX(" + currentPosition + "px)";    });}

上述代码中，我们对左箭头、右箭头和底部导航按钮分别绑定事件。在事件中，我们根据当前位置进行相应切换并更新轮播位置。

5. 示例

为了更好的展示代码效果，我特意制作了一个焦点图demo，大家可以点击链接查看效果。

另外，你也可以尝试自己在代码中进行一些变化，比如：

• 轮播切换速度；
• 轮播暂停和恢复功能；
• 切换动画的方式等等。

希望这个“js实现非常简单的焦点图切换特效实例”的攻略能够对你有所帮助。