index.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. window.addEventListener('scroll', handleScroll, true)
  2. handleScroll()
  3. function handleScroll() {
  4. if (window.scrollY > 100) {
  5. document.getElementsByClassName('handler-app-android-download').item(0).className = "handler-app-android-download"
  6. document.getElementsByClassName("handler-to-top").item(0).style.display = "block"
  7. } else {
  8. document.getElementsByClassName('handler-app-android-download').item(0).className = "handler-app-android-download handler-item-bottom"
  9. document.getElementsByClassName("handler-to-top").item(0).style.display = "none"
  10. }
  11. }
  12. function ToTop() {
  13. window.scrollTo({
  14. top: 0,
  15. behavior: 'smooth'
  16. })
  17. }
  18. //todo 首页轮播图
  19. window.onload = function () {
  20. var items = document.getElementsByClassName("item");
  21. var circles = document.getElementsByClassName("circle");
  22. var leftBtn = document.getElementById("btn-left");
  23. var rightBtn = document.getElementById("btn-right");
  24. var content = document.querySelector('.content');
  25. var index = 0;
  26. var timer = null;
  27. //清除class
  28. var clearclass = function () {
  29. for (let i = 0; i < items.length; i++) {
  30. items[i].className = "item";
  31. circles[i].className = "circle";
  32. circles[i].setAttribute("num", i);
  33. }
  34. }
  35. /*只显示一个class*/
  36. function move() {
  37. clearclass();
  38. items[index].className = "item active";
  39. circles[index].className = "circle white";
  40. }
  41. //点击右边按钮切换下一张图片
  42. rightBtn.onclick = function () {
  43. if (index === items.length - 1){
  44. index = 0;
  45. }else {
  46. index++
  47. }
  48. move();
  49. }
  50. //点击左边按钮切换上一张图片
  51. leftBtn.onclick = function () {
  52. if (index === 0){
  53. index = items.length - 1;
  54. }else {
  55. index--
  56. }
  57. move();
  58. }
  59. //开始定时器,点击右边按钮,实现轮播
  60. rightBtn.onclick();
  61. timer = setInterval(function () {
  62. rightBtn.onclick();
  63. }, 3000)
  64. //点击圆点时,跳转到对应图片
  65. for (var i = 0; i < circles.length; i++) {
  66. circles[i].addEventListener("click", function () {
  67. var point_index = this.getAttribute("num");
  68. index = point_index;
  69. move();
  70. })
  71. }
  72. //鼠标移入清除定时器,并开启一个三秒的定时器,使慢慢转动
  73. content.onmouseover = function () {
  74. clearInterval(timer);
  75. timer = setInterval(function () {
  76. rightBtn.onclick();
  77. }, 3000)
  78. }
  79. //鼠标移出又开启定时器
  80. content.onmouseleave = function () {
  81. clearInterval(timer);
  82. timer = setInterval(function () {
  83. rightBtn.onclick();
  84. }, 1500)
  85. }
  86. }