$(function () { // $(".header_root").load("./comm/header.html"); $(".footer_root").load("./comm/footer.html"); // nav传值显示下划线 // $(".header_root").data("nav_info", 1); //获取元素 var divheight = $(".exam_one").height(); var container = $(".exam_container"); var list = $(".show_exam"); var buts = $(".exam_item"); var index = 0; //存放当前显示的图片的下标 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 == 5) { index = 0; offset = 0; } showButton(); console.log("当前索引", index, top, offset); list.animate({ top: offset }, 300, function () { if (top > -200) { } }); } var imglist = [ { blue: "../img/product/mtblue.png", grey: "../img/product/mtgrey.png" }, { blue: "../img/product/zdblue.png", grey: "../img/product/zdgrey.png" }, { blue: "../img/product/ydblue.png", grey: "../img/product/ydgrey.png" }, { blue: "../img/product/yyblue.png", grey: "../img/product/yygrey.png" }, { blue: "../img/product/sjblue.png", grey: "../img/product/sjgrey.png" } ]; //亮起小圆点 function showButton() { var html = ""; buts.each(function (idx, item) { if (idx == index) { $(this).html(``); } else { $(this).html(``); } }); } // 鼠标离开图片区域时,轮播继续 function play() { timer = setTimeout(function () { animate(divheight); play(); }, interval); } //鼠标进入图片区域时,停止轮播 function stop() { if (timer) { clearTimeout(timer); timer = null; } } // 点击事件 buts.each(function () { $(this).bind("click", function () { var myIndex = parseInt($(this).attr("index")); if (myIndex == index) { return; } index = myIndex; showButton(); }); }); container.hover(stop, play); play(); showButton(); });