jquery移动端焦点图

随着移动端用户量的增加，移动端网站的开发也越来越重要。而焦点图作为移动端网站常用的交互方式，也需要用jquery等工具来实现。下面我们来介绍一下如何使用jquery实现移动端焦点图。

//获取DOM元素
var $slider = $('.slider');
var $sliderContainer = $slider.find('.slider-container');
var $sliderImg = $sliderContainer.find('.slider-img');
var $sliderBtn = $slider.find('.slider-btn');
var $prevBtn = $sliderBtn.find('.prev');
var $nextBtn = $sliderBtn.find('.next');

//初始化
var len = $sliderImg.length; //焦点图数量
var index = 0; //当前焦点图索引

//点击上一张
$prevBtn.on('click',function() {
  index--;
  if (index = len) {
    index = 0;
  }
  changeSlide();
});

//自动轮播
var timer = setInterval(function() {
  index++;
  if (index >= len) {
    index = 0;
  }
  changeSlide();
},3000);

//切换焦点图
function changeSlide() {
  var left = -index * 100 + '%';
  $sliderContainer.animate({ left: left },300);
};

以上代码实现了简单的移动端焦点图，其中用到了jquery的animate动画函数实现焦点图的切换效果。通过点击按钮或者自动轮播都可以实现焦点图的自动切换。

但是这里只是简单的实现了焦点图的轮播效果，如果要实现更多的特效和交互，需要对代码进行相应的修改和补充。