xh_web/js/product.js

//获取元素
var divheight = $(".exam_one").height()-70;
var container = $(".exam_container");
var list = $(".show_exam");
var buts = $(".exam_item");
var index = 1; //存放当前显示的图片的下标
var imgnum = 3; // 图片数量
var len = 1; //显示数量
var interval = 5000; //位移时间间隔
var timer;

function animate(offset) {
  var top = parseInt(list.css("top")) + offset;
  console.log(list.css("top"));
  var absnum = Math.abs(offset);
  index++
 
  // 边界判断
  // if (offset > 0) {
  //   offset = "+=" + offset;
  // } else {
  //   offset = "-=" + Math.abs(offset);
  // }
  offset = "-=" + Math.abs(offset);
  if(index == 6){
    index = 1;
    offset=0;
    console.log("最后一个");
  }
  console.log("当前索引",index, top, offset)
  list.animate({ top: offset }, 300, function () {
    if (top > -200) {
    }
  });
}
//亮起小圆点
function showButton() {
  console.log("亮起小圆点", index);
  //当前图片的小圆点亮起，其他小圆点不亮
  buts
    .eq(index - 1)
    .addClass("active")
    .siblings()
    .removeClass("active");
}
console.log(divheight);
// 鼠标离开图片区域时，轮播继续
function play() {
  console.log("鼠标离开");
  timer = setTimeout(function () {
    animate(divheight);
    play();
  }, interval);
}

//鼠标进入图片区域时，停止轮播
function stop() {
  console.log("鼠标进入");
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
}
// 点击事件
buts.each(function () {
  $(this).bind("click", function () {
    // 判断当前是否在进行动画
    if (list.is(":animated") || $(this).attr("class") == "on") {
      return;
    }
    var myIndex = parseInt($(this).attr("index"));
    if (myIndex == index) {
      return;
    }
    //计算偏移量
    var offset = (0 - divwidth) * (myIndex - index);
    index = myIndex;
    animates(offset);
    showButton();
    stop();
  });
});
container.hover(stop, play);

play();