jquery是一款非常流行的JavaScript库，它的DOM操作和动画效果功能非常强大。其中，焦点图切换特效是一种常见的网页设计效果，可以提升网页的用户体验。下面，我们来介绍一下如何使用jquery实现焦点图切换特效。

//HTML结构
<div class="slider">
  <ul class="slider-img">
    <li><img src="img/1.jpg"></li>
    <li><img src="img/2.jpg"></li>
    <li><img src="img/3.jpg"></li>
  </ul>
  <ul class="slider-nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

//CSS样式
.slider{width: 500px; height: 300px; position: relative; overflow: hidden;}
.slider-img{position: relative; width: 1500px; height: 300px;}
.slider-img li{float: left; list-style: none;}
.slider-nav{position: absolute; bottom: 10px; left: 50%; margin-left: -50px; width: 100px; height: 20px;}
.slider-nav li{float: left; margin-right: 5px; width: 20px; height: 20px; line-height: 20px; text-align: center; background: #333; color: #fff; cursor: pointer;}

//JS代码
$(function(){
  var index = 0;
  var timer = setInterval(function(){
    index++;
    if(index > 2){index = 0;}
    showImg(index);
  }, 2000);
  
  function showImg(index){
    var imgWidth = $(".slider-img li").width();
    $(".slider-img").stop().animate({left: -index*imgWidth}, 500);
    $(".slider-nav li").eq(index).addClass("active").siblings().removeClass("active");
  }
  
  $(".slider-nav li").click(function(){
    index = $(this).index();
    showImg(index);
  });
});

上述代码中，我们首先定义了一个包含图片和导航按钮的div容器，并设置样式。然后，在jquery中，我们使用setInterval函数实现自动轮播，使用animate函数设置图片的切换动画效果，使用addClass和removeClass函数切换导航按钮的激活状态。最后，使用click函数绑定导航按钮的点击事件，实现手动切换。这样，我们就实现了一组简单的焦点图切换特效。