一页上有多个JS幻灯片

时间：2018-12-10 17:31:43

标签： javascript html

我有3个幻灯片显示，想要在一页上显示。现在的问题是，而不是每个slideShow一张一张地更改图像。上一个幻灯片放映将更改3，其他2个则不执行任何操作。 

var slideShows = document.getElementsByClassName("slideShow");
var dots = document.getElementsByClassName("dot");
var timers = [];
var slideShowsArray = [];

function addListener(element, listenFor, functionToCall) {
	for (var i = 0; i < element.length; i++) {

		element[i].addEventListener(listenFor, functionToCall);
	}
}

function addDots() {
	for (var i = 0; i < slideShows.length; i++) {
		var slides = slideShows[i].getElementsByClassName("slide");
		for (var j = 0; j < slides.length; j++) {
			var dot = document.createElement("div");
			dot.classList.add("dot");
			dot.innerHTML = "O";
			slideShows[i].appendChild(dot);
		}
	}
}

addDots();

function nextSlide(ele) {
	var elem = document.getElementById(ele);
	console.log(ele);
	var currentSlideHere = elem.getElementsByClassName("visible");
	var dots = elem.getElementsByClassName("dot");
	var slides = elem.getElementsByClassName("slide");
	var slidesArray = Array.prototype.slice.call(slides);
	var here = slidesArray.indexOf(currentSlideHere[0]);
	dots[here].style.backgroundColor = "white";
	slides[here].classList.remove("visible");
	here += 1;
	if (here >= slides.length) {
		here = 0;
	}
	slides[here].classList.add("visible");
	dots[here].style.backgroundColor = "grey";
}

function changeImageDot() {
	var slides = this.parentElement.getElementsByClassName("slide");
	var dotsHere = this.parentElement.getElementsByClassName("dot");
	var dotsArray = Array.prototype.slice.call(dotsHere);
	var chosenSlide = dotsArray.indexOf(this);
	for (var i = 0; i < slides.length; i++) {
		slides[i].classList.remove("visible");
		dotsHere[i].style.backgroundColor = "white";
	}
	this.style.backgroundColor = "grey";
	slides[chosenSlide].classList.add("visible");
}

addListener(dots, "click", changeImageDot);

addListener(slideShows, "mouseover", function () {
	var thisIndex = slideShowsArray.indexOf(this.id);
	clearInterval(timers[thisIndex]);
})


addListener(slideShows, "mouseleave", function () {
	var thisIndex = slideShowsArray.indexOf(this.id);
	if (thisIndex == 0) {

	} else if (thisIndex == 1) {

	}
})

function setUpTimers() {
	for (var i = 0; i < slideShows.length; i++) {
		slideShowsArray.push(slideShows[i].id);
		var element = slideShowsArray[i];
		var timer = setInterval(function(){nextSlide(element)}, 5000);
		timers.push(timer);
	}
	console.log(timers);
	console.log(slideShowsArray);
}

setUpTimers();
.slideDiv {
	height: 200px;
	width: 200px;
	background-color: #378B53;
}
.slide {
	display: none;
	transition: 4s;
}

.visible {
	display: block;
	width: 100%;
	opacity: 100;
}

.slideShow {
	width: 40%;
	display: inline-block;
}

.dot {
	display: inline-block;
	cursor: pointer;
}
	<div class = "slideShow" id = "slideShow1">
		<div class = "slideDiv slide visible">HELLO 1</div>
		<div class = "slideDiv slide">HELLO 2</div>
		<div class = "slideDiv slide">HELLO 3</div>
		<div class = "slideDiv slide">HELLO 4</div>
		<div class = "slideDiv slide">HELLO 3</div>
		<div class = "slideDiv slide">HELLO 4</div>
		<div class = "slideDiv slide">HELLO 3</div>
		<div class = "slideDiv slide">HELLO 4</div>
	</div>
  
  	<div class = "slideShow" id = "slideShow2">
		<div class = "slideDiv slide visible">HELLO 1</div>
		<div class = "slideDiv slide">HELLO 2</div>
		<div class = "slideDiv slide">HELLO 3</div>
		<div class = "slideDiv slide">HELLO 4</div>
		<div class = "slideDiv slide">HELLO 3</div>
		<div class = "slideDiv slide">HELLO 4</div>
		<div class = "slideDiv slide">HELLO 3</div>
		<div class = "slideDiv slide">HELLO 4</div>
	</div>
  
  	<div class = "slideShow" id = "slideShow3">
		<div class = "slideDiv slide visible">HELLO 1</div>
		<div class = "slideDiv slide">HELLO 2</div>
		<div class = "slideDiv slide">HELLO 3</div>
		<div class = "slideDiv slide">HELLO 4</div>
		<div class = "slideDiv slide">HELLO 3</div>
		<div class = "slideDiv slide">HELLO 4</div>
		<div class = "slideDiv slide">HELLO 3</div>
		<div class = "slideDiv slide">HELLO 4</div>
	</div>

当我将鼠标悬停在每个幻灯片上时，计时器将停止。

有人可以帮忙吗，我不确定哪里出了问题，这很令人沮丧。

2 个答案:

答案 0 :(得分：0)

尝试一下：https://jsfiddle.net/AnuragSinha/caqmhnt1/40/我已经固定了mouseleave部分。现在，当您将鼠标悬停在某个框上时，该计时器将启动，其他计时器将等待其各自的mouseleave事件。您可能需要与其他地方进行类似的更改。由于我们在循环中工作，请注意如何将循环变量“ i”的值传递给函数。

var slideShows = document.getElementsByClassName("slideShow");
var dots = document.getElementsByClassName("dot");
var timers = [];

// Finds all elements by class name and adds an event listener to each.
function addListener(element, listenFor, functionToCall) {
  for (var i = 0; i < element.length; i++) {
    element[i].addEventListener(listenFor, functionToCall);
  }
}

function listen(element, listenFor, functionToCall) {
  element.addEventListener(listenFor, functionToCall);
}

function addDots() {
  for (var i = 0; i < slideShows.length; i++) {
    var slides = slideShows[i].getElementsByClassName("slide");
    for (var j = 0; j < slides.length; j++) {
      var dot = document.createElement("div");
      dot.classList.add("dot");
      dot.innerHTML = "O";
      slideShows[i].appendChild(dot);
    }
  }
}

addDots();

function nextSlide(i){
	console.log(i);
    var currentSlideHere = slideShows[i].getElementsByClassName("visible");
    var dots = slideShows[i].getElementsByClassName("dot");
    var slides = slideShows[i].getElementsByClassName("slide");
    var slidesArray = Array.prototype.slice.call(slides);
    var here = slidesArray.indexOf(currentSlideHere[0]);
    dots[here].style.backgroundColor = "white";
    slides[here].classList.remove("visible");
    here += 1;
    if (here >= slides.length) {
      here = 0;
    }
    slides[here].classList.add("visible");
    dots[here].style.backgroundColor = "grey";
}

function changeImageDot() {
  var slides = this.parentElement.getElementsByClassName("slide");
  var dotsHere = this.parentElement.getElementsByClassName("dot");
  var dotsArray = Array.prototype.slice.call(dotsHere);
  var chosenSlide = dotsArray.indexOf(this);
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove("visible");
    dotsHere[i].style.backgroundColor = "white";
  }
  this.style.backgroundColor = "grey";
  slides[chosenSlide].classList.add("visible");
}

addListener(dots, "click", changeImageDot);

for(var i=0; i<slideShows.length; i++) {
	(function() {
  console.log("Add mousover for " + i);
  console.log(slideShows[i]);
  var count = i;
  	 listen(slideShows[count], "mouseover", function() {
     	console.log("mouseover : " + count);
      clearInterval(timers[count]);
      timers[count] = undefined;
    })
  }());
}


for(var i=0; i<slideShows.length; i++) {
	(function() {
  var count = i;
  timers.push(undefined);
  console.log("Add mouse leave for " + i);
  console.log(slideShows[count]);
    listen(slideShows[count], "mouseleave", function() {
    console.log("mouseleave : " + count);
  slideShow(count);
})
  }());
	
}


function slideShow(count) {
console.log("slideShow..start " + count);
console.log("slideShow..start " + timers[count]);
if(timers[count] == undefined ) {
	console.log("proceed");
	timers[count] = setInterval(function() {nextSlide(count)}, 		1000);
} 
}
.slide {
  display: none;
  transition: 4s;
}

.visible {
  display: block;
  width: 100%;
  opacity: 100;
}

.slideShow {
  width: 40%;
  display: inline-block;
}

.slideDiv {
  height: 200px;
  width: 200px;
  background-color: #378B53;
}

.dot {
  display: inline-block;
  cursor: pointer;
}
<div class="slideShow" id="1">
  <div class="slideDiv slide visible">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
</div>

<div class="slideShow" id="2">
  <div class="slideDiv slide visible">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
</div>

<div class="slideShow" id="3">
  <div class="slideDiv slide visible">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
</div>

答案 1 :(得分：0)

决定以其他方式执行此操作，而不是清除间隔并尝试通过创建新间隔来重新启动它们。最终变得非常混乱。

现在，当我将鼠标悬停在图像上以停止幻灯片功能时，我只是在更改类，因为幻灯片正在寻找“可见”类，并且将图像悬停在该类上时，该类被删除。

查看此处：

var slideShows = document.getElementsByClassName("slideShow");
var dots = document.getElementsByClassName("dot");
var slideShow1 = document.getElementById("slideShow1");
var slideShow1Timer = slideShow1.getAttribute("data-slide-time")
var slideShow2 = document.getElementById("slideShow2");
var slideShow2Timer = slideShow2.getAttribute("data-slide-time")
var slideShow3 = document.getElementById("slideShow3");
var slideShow3Timer = slideShow3.getAttribute("data-slide-time")
var timer1 = setInterval(function() {
  nextSlide("slideShow1")
}, slideShow1Timer);
var timer2 = setInterval(function() {
  nextSlide("slideShow2")
}, slideShow2Timer);
var timer3 = setInterval(function() {
  nextSlide("slideShow3")
}, slideShow3Timer);
var slideShowsArray = ["slideShow1", "slideShow2", "slideShow3"];

// Finds all elements by class name and adds an event listener to each.
function addListener(element, listenFor, functionToCall) {
  for (var i = 0; i < element.length; i++) {

    element[i].addEventListener(listenFor, functionToCall);
  }
}

function addDots() {
  for (var i = 0; i < slideShows.length; i++) {
    var slides = slideShows[i].getElementsByClassName("slide");
    for (var j = 0; j < slides.length; j++) {
      var dot = document.createElement("div");
      dot.classList.add("dot");
      dot.innerHTML = "O";
      slideShows[i].appendChild(dot);
    }
  }
}

addDots();

function nextSlide(ele) {
  var elem = document.getElementById(ele);
  var currentSlideHere = elem.getElementsByClassName("visible");
  if (currentSlideHere[0]) {
    var dots = elem.getElementsByClassName("dot");
    var slides = elem.getElementsByClassName("slide");
    var slidesArray = Array.prototype.slice.call(slides);
    var here = slidesArray.indexOf(currentSlideHere[0]);
    dots[here].style.backgroundColor = "white";
    slides[here].classList.remove("visible");
    here += 1;
    if (here >= slides.length) {
      here = 0;
    }
    slides[here].classList.add("visible");
    dots[here].style.backgroundColor = "grey";
  }
}

function changeImageDot() {
  var slides = this.parentElement.getElementsByClassName("slide");
  var dotsHere = this.parentElement.getElementsByClassName("dot");
  var dotsArray = Array.prototype.slice.call(dotsHere);
  var chosenSlide = dotsArray.indexOf(this);
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove("visible");
    slides[i].classList.remove("visiblePaused");
    dotsHere[i].style.backgroundColor = "white";
  }
  this.style.backgroundColor = "grey";
  slides[chosenSlide].classList.add("visible");
}

addListener(dots, "click", changeImageDot);

addListener(slideShows, "mouseover", function() {
  var lemon = this.getElementsByClassName("visible");
  lemon[0].classList.add("visiblePaused");
  lemon[0].classList.remove("visible");
})


addListener(slideShows, "mouseleave", function() {
  var lemon = this.getElementsByClassName("visiblePaused");
  lemon[0].classList.add("visible");
  lemon[0].classList.remove("visiblePaused");
})
.slideDiv {
  height: 200px;
  width: 200px;
  background-color: #378B53;
}

.slide {
  display: none;
  transition: 4s;
}

.visible {
  display: block;
  width: 100%;
  opacity: 100;
}

.visiblePaused {
  display: block;
  width: 100%;
  opacity: 100;
}

.slideShow {
  width: 40%;
  display: inline-block;
}

.dot {
  display: inline-block;
  cursor: pointer;
}
<div class="slideShow" id="slideShow1" data-slide-time="2000">
  <div class="slideDiv slide">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide visible">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
</div>
<div class="slideShow" id="slideShow2" data-slide-time="2000">
  <div class="slideDiv slide">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide visible">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
</div>
<div class="slideShow" id="slideShow3" data-slide-time="2000">
  <div class="slideDiv slide">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide visible">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
</div>

相关问题
最新问题