在逆转横幅广告循环JavaScript中需要帮助

时间：2019-02-13 02:46:25

标签： javascript function loops slideshow reverse

总的来说，我已经花了比我更长的时间来绞尽脑汁，承认自己试图扭转这种作用。我设置了一个循环，因此我的幻灯片演示在加载时开始，在悬停时停止，并可以使用上一个和下一个按钮进行导航。切换方向时，幻灯片会同时出现在两个方向上，并重置为一个。

我可以肯定，这与//intial data let countList = [3,4,5,4,37,8,4]; let dayCount = [1,1,3,4,5,3,2]; //updated data let updatedCountList = [3,4,5,4,37,8,4,6,4,7,8,5]; let updatedDayCount = [1,1,3,4,5,3,2,4,5,4,3,2]; //run at page load runGraph(countList, dayCount); //run at button push function runGraphButton(updatedCountList, updatedDayCount){ runGraph(updatedCountList,updatedDayCount); } function runGraph(counts,days){ let ctx = document.getElementById("buildCount").getContext('2d'); let myChart = new Chart(ctx, { type: 'bar', data: { labels: counts, datasets: [{ label: 'Builds per Day', data: days, backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: {stepSize: 1, beginAtZero:true } }] } } }); removeData(myChart); function removeData(chart) { chart.data.labels.pop(); chart.data.datasets.forEach((dataset) => { dataset.data.pop(); }); chart.update(); } } 是一个全局变量并在更改方向时重置为一个变量有关。有什么方法可以使该值不重置？我可以使用一个函数来永久更新全局变量，还是应该制作一个双向通用的庞大函数？这是我为此项目准备的banner.js。

var bannerStatus
var bannerStatus = 1;
var bannerTimer = 3000;

window.onload = function() {
  bannerLoop();
}

var startBannerLoop = setInterval(function() {
  bannerLoop();
}, bannerTimer);

document.getElementById("imgtabs").onmouseenter = function() {
  clearInterval(startBannerLoop);
}

document.getElementById("imgtabs").onmouseleave = function() {
  startBannerLoop = setInterval(function() {
    bannerLoop();
  }, bannerTimer);
}



function bannerLoop() {

  if (bannerStatus === 1) {

    document.getElementById("ban2").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban3").style.right = "100%";
      document.getElementById("ban3").style.zIndex = "900";
      document.getElementById("ban1").style.right = "0px";
      document.getElementById("ban1").style.zIndex = "1000";
      document.getElementById("ban2").style.right = "-100%";
      document.getElementById("ban2").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban2").style.opacity = "1";
    }, 1000);

    bannerStatus++;
  } else if (bannerStatus === 2) {

    document.getElementById("ban3").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban1").style.right = "100%";
      document.getElementById("ban1").style.zIndex = "900";
      document.getElementById("ban2").style.right = "0px";
      document.getElementById("ban2").style.zIndex = "1000";
      document.getElementById("ban3").style.right = "-100%";
      document.getElementById("ban3").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban3").style.opacity = "1";
    }, 1000);

    bannerStatus++;
  } else if (bannerStatus === 3) {

    document.getElementById("ban1").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban2").style.right = "100%";
      document.getElementById("ban2").style.zIndex = "900";
      document.getElementById("ban3").style.right = "0px";
      document.getElementById("ban3").style.zIndex = "1000";
      document.getElementById("ban1").style.right = "-100%";
      document.getElementById("ban1").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban1").style.opacity = "1";
    }, 1000);

    bannerStatus = 1;
  }
}

function reverseBanner() {
  if (bannerStatus === 1) {

    document.getElementById("ban3").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban3").style.right = "100%";
      document.getElementById("ban3").style.zIndex = "900";
      document.getElementById("ban1").style.right = "0px";
      document.getElementById("ban1").style.zIndex = "1000";
      document.getElementById("ban2").style.right = "-100%";
      document.getElementById("ban2").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban3").style.opacity = "1";
    }, 1000);

    bannerStatus++;
  } else if (bannerStatus === 2) {

    document.getElementById("ban2").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban2").style.right = "100%";
      document.getElementById("ban2").style.zIndex = "900";
      document.getElementById("ban3").style.right = "0px";
      document.getElementById("ban3").style.zIndex = "1000";
      document.getElementById("ban1").style.right = "-100%";
      document.getElementById("ban1").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban2").style.opacity = "1";
    }, 1000);

    bannerStatus++;
  } else if (bannerStatus === 3) {

    document.getElementById("ban1").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban1").style.right = "100%";
      document.getElementById("ban1").style.zIndex = "900";
      document.getElementById("ban2").style.right = "0px";
      document.getElementById("ban2").style.zIndex = "1000";
      document.getElementById("ban3").style.right = "-100%";
      document.getElementById("ban3").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban1").style.opacity = "1";
    }, 1000);

    bannerStatus = 1;

  }

  document.getElementById("nxtbtn").onclick = function() {
    bannerLoop();
  }

  document.getElementById("prvbtn").onclick = function() {
    reverseBanner();
  }
#imgtabs {
  background-color: hsl(43, 0%, 93%);
  height: 250px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.tab {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  transition: all ease-in-out 500ms;
}

#ban1 {
  background-image: url(imgs/Romans%20Group.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#ban2 {
  background-image: url(imgs/AlphaMailTruck.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#ban3 {
  background-image: url(imgs/Romans%20Group.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tab h3 {
  position: absolute;
  right: 5%;
  bottom: 2%;
  color: white;
}

.imgbtn {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 50%;
  z-index: 1200;
  cursor: pointer;
}

.imgbtn:hover {
  opacity: 0.9;
}

.prvbtn {
  left: 5px;
}

.nxtbtn {
  right: 5px;
}

1 个答案:

答案 0 :(得分：0)

如果发生了逆转，请朝相反的方向

document.getElementById("ban1").style.left

演示

var bannerStatus = 1;
var bannerTimer = 3000;

window.onload = function() {
  bannerLoop();
}

var startBannerLoop = setInterval(function() {
  bannerLoop();
}, bannerTimer);

document.getElementById("imgtabs").onmouseenter = function() {
  clearInterval(startBannerLoop);
}

document.getElementById("imgtabs").onmouseleave = function() {
  startBannerLoop = setInterval(function() {
    bannerLoop();
  }, bannerTimer);
}



function bannerLoop() {

  if (bannerStatus === 1) {

    document.getElementById("ban2").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban3").style.right = "100%";
      document.getElementById("ban3").style.zIndex = "900";
      document.getElementById("ban1").style.right = "0px";
      document.getElementById("ban1").style.zIndex = "1000";
      document.getElementById("ban2").style.right = "-100%";
      document.getElementById("ban2").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban2").style.opacity = "1";
    }, 1000);

    bannerStatus++;
  } else if (bannerStatus === 2) {

    document.getElementById("ban3").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban1").style.right = "100%";
      document.getElementById("ban1").style.zIndex = "900";
      document.getElementById("ban2").style.right = "0px";
      document.getElementById("ban2").style.zIndex = "1000";
      document.getElementById("ban3").style.right = "-100%";
      document.getElementById("ban3").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban3").style.opacity = "1";
    }, 1000);

    bannerStatus++;
  } else if (bannerStatus === 3) {

    document.getElementById("ban1").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban2").style.right = "100%";
      document.getElementById("ban2").style.zIndex = "900";
      document.getElementById("ban3").style.right = "0px";
      document.getElementById("ban3").style.zIndex = "1000";
      document.getElementById("ban1").style.right = "-100%";
      document.getElementById("ban1").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban1").style.opacity = "1";
    }, 1000);

    bannerStatus = 1;
  }
}

function reverseBanner() {
  if (bannerStatus === 1) {

    document.getElementById("ban3").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban3").style.left = "100%";
      document.getElementById("ban3").style.zIndex = "900";
      document.getElementById("ban1").style.left = "0px";
      document.getElementById("ban1").style.zIndex = "1000";
      document.getElementById("ban2").style.left = "-100%";
      document.getElementById("ban2").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban3").style.opacity = "1";
    }, 1000);

    bannerStatus++;
  } else if (bannerStatus === 2) {

    document.getElementById("ban2").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban2").style.left = "100%";
      document.getElementById("ban2").style.zIndex = "900";
      document.getElementById("ban3").style.left = "0px";
      document.getElementById("ban3").style.zIndex = "1000";
      document.getElementById("ban1").style.left = "-100%";
      document.getElementById("ban1").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban2").style.opacity = "1";
    }, 1000);

    bannerStatus++;
  } else if (bannerStatus === 3) {

    document.getElementById("ban1").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("ban1").style.left = "100%";
      document.getElementById("ban1").style.zIndex = "900";
      document.getElementById("ban2").style.left = "0px";
      document.getElementById("ban2").style.zIndex = "1000";
      document.getElementById("ban3").style.left = "-100%";
      document.getElementById("ban3").style.zIndex = "1100";

    }, 500);

    setTimeout(function() {
      document.getElementById("ban1").style.opacity = "1";
    }, 1000);

    bannerStatus = 1;

  }

  document.getElementById("nxtbtn").onclick = function() {
    bannerLoop();
  }

  document.getElementById("prvbtn").onclick = function() {
    reverseBanner();
  }
}
#imgtabs {
  background-color: hsl(43, 0%, 93%);
  height: 250px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.tab {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  transition: all ease-in-out 500ms;
}

#ban1 {
  background-image: url(https://i.ibb.co/5LPXSfn/Lenna-test-image.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#ban2 {
  background-image: url(https://i.ibb.co/tmQZgJb/68eb2df1a189f88bb0cbd47a3e00c112.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#ban3 {
  background-image: url(https://i.ibb.co/ZHvWsKb/o1z7p.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.tab h3 {
  position: absolute;
  right: 5%;
  bottom: 2%;
  color: white;
}

.imgbtn {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 50%;
  z-index: 1200;
  cursor: pointer;
}

.imgbtn:hover {
  opacity: 0.9;
}

.prvbtn {
  left: 5px;
}

.nxtbtn {
  right: 5px;
}
<html>

<body>
  <div id="imgtabs">

    <div class="tab" id="ban1">
      <h3>First</h3>
    </div>

    <div class="tab" id="ban2">
      <h3>Second</h3>
    </div>

    <div class="tab" id="ban3">
      <h3>Third</h3>
    </div>

    <a class="imgbtn prvbtn" id="prvbtn">&#10094;</a>
    <a class="imgbtn nxtbtn" id="nxtbtn">&#10095;</a>

  </div>
</body>

</html>

相关问题
最新问题