星火官网,前端页面(前台)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

product.js 2.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. $(function () {
  2. // $(".header_root").load("./comm/header.html");
  3. $(".footer_root").load("./comm/footer.html");
  4. // nav传值显示下划线
  5. // $(".header_root").data("nav_info", 1);
  6. //获取元素
  7. var divheight = $(".exam_one").height();
  8. var container = $(".exam_container");
  9. var list = $(".show_exam");
  10. var buts = $(".exam_item");
  11. var index = 0; //存放当前显示的图片的下标
  12. var interval = 5000; //位移时间间隔
  13. var timer;
  14. function animate(offset) {
  15. var top = parseInt(list.css("top")) + offset;
  16. console.log(list.css("top"));
  17. var absnum = Math.abs(offset);
  18. index++;
  19. // 边界判断
  20. // if (offset > 0) {
  21. // offset = "+=" + offset;
  22. // } else {
  23. // offset = "-=" + Math.abs(offset);
  24. // }
  25. offset = "-=" + Math.abs(offset);
  26. if (index == 5) {
  27. index = 0;
  28. offset = 0;
  29. }
  30. showButton();
  31. console.log("当前索引", index, top, offset);
  32. list.animate({ top: offset }, 300, function () {
  33. if (top > -200) {
  34. }
  35. });
  36. }
  37. var imglist = [
  38. {
  39. blue: "../img/product/mtblue.png",
  40. grey: "../img/product/mtgrey.png"
  41. },
  42. {
  43. blue: "../img/product/zdblue.png",
  44. grey: "../img/product/zdgrey.png"
  45. },
  46. {
  47. blue: "../img/product/ydblue.png",
  48. grey: "../img/product/ydgrey.png"
  49. },
  50. {
  51. blue: "../img/product/yyblue.png",
  52. grey: "../img/product/yygrey.png"
  53. },
  54. {
  55. blue: "../img/product/sjblue.png",
  56. grey: "../img/product/sjgrey.png"
  57. }
  58. ];
  59. //亮起小圆点
  60. function showButton() {
  61. var html = "";
  62. buts.each(function (idx, item) {
  63. if (idx == index) {
  64. $(this).html(`<img src="${imglist[idx].blue}" />`);
  65. } else {
  66. $(this).html(`<img src="${imglist[idx].grey}" />`);
  67. }
  68. });
  69. }
  70. // 鼠标离开图片区域时,轮播继续
  71. function play() {
  72. timer = setTimeout(function () {
  73. animate(divheight);
  74. play();
  75. }, interval);
  76. }
  77. //鼠标进入图片区域时,停止轮播
  78. function stop() {
  79. if (timer) {
  80. clearTimeout(timer);
  81. timer = null;
  82. }
  83. }
  84. // 点击事件
  85. buts.each(function () {
  86. $(this).bind("click", function () {
  87. var myIndex = parseInt($(this).attr("index"));
  88. if (myIndex == index) {
  89. return;
  90. }
  91. index = myIndex;
  92. showButton();
  93. });
  94. });
  95. container.hover(stop, play);
  96. play();
  97. showButton();
  98. });