js轮播图点击左右切换

可以用jQuery实现一个基本的轮播图功能，其中通过监听“点击左箭头”和“点击右箭头”两个事件来切换轮播图的内容。

下面是一个基本的实现代码示例：

$(function(){
  var len = $(".slider-panel").length;
  var index = 0;
  var isAnimating = false;
  var timer;

  //点击左箭头按钮切换
  $(".slider-prev").click(function(){
    if(isAnimating)return;
    index--;
    if(index == -1){
      index = len-1;
    }
    slide(index);
  });

  //点击右箭头按钮切换
  $(".slider-next").click(function(){
    if(isAnimating)return;
    index++;
    if(index == len){
      index = 0;
    }
    slide(index);
  });

  //图片轮播
  function slide(index){
    isAnimating = true;
    $(".slider-panel.active").fadeOut(1000).removeClass("active");
    $(".slider-panel").eq(index).fadeIn(1000, function(){
      $(this).addClass("active");
      isAnimating = false;
    });
  }

  //自动播放
  function autoPlay(){
    timer = setInterval(function(){
      $(".slider-next").trigger("click");
    },3000);
  }

  autoPlay();
});

在上述示例代码中，我们主要定义了四个变量：
- len：表示轮播图的图片数量
- index：表示当前显示的图片下标
- isAnimating：标志变量，用于避免动画重复执行
- timer：自动播放的定时器

接着，我们监听“点击左箭头”和“点击右箭头”两个事件，并在事件中触发轮播功能。在轮播的过程中，我们通过fadeIn()和fadeOut()函数分别实现淡入淡出的效果。

最后，我们也增加了一个定时器，用于自动播放轮播图。这里设置了一个3秒钟的时间间隔，每隔3秒钟就自动切换到下一张图片。

需要注意的是，我们在这个示例中使用了jQuery库，所以在使用前需要导入jQuery库文件。另外，这里的代码仅仅是一个基本的轮播图实现，你可以根据自己的需求对代码进行修改和拓展。