javascript - 在自动 Javascript 幻灯片中单击箭头时出现空白

标签 javascript css slideshow

我正在尝试制作一个基于 w3 css 的自动 Javascript 幻灯片，当您点击箭头时切换到手动。除此之外，在开始时，如果没有点击上一个或下一个箭头，幻灯片将运行 2 个循环。

加载页面后，幻灯片放映处于自动模式。那时，如果我们点击上一个或下一个箭头，它应该停在那时的幻灯片上。相反，它显示一个看起来很难看的白色屏幕。我正在添加 pause 变量以尝试在单击箭头时实现暂停功能。请告诉我我做错了什么。注意 - 我是 Javascript 的新手。

下面是我的片段-

var paused = false;
var myIndex = 0;
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 1000; //for testing purposes
function carousel() {
  var x = document.querySelectorAll(".mySlides"); //using modern querySelectorAll
  maxLength = x.length * loops; //times 2 for two loops    

  //optimalization here - borrowing Array forEach to loop over node list
  Array.prototype.forEach.call(x, function(element) {
    element.style.display = "none";
  });

  counter++; //adding counter
  if (paused === false) { 
  if (myIndex >= x.length) {
    myIndex = 0
  }; //reset this to zero indexing
  x[myIndex].style.display = "block"; //show the slide
  if (counter <= maxLength) //ie counter <= 10, execute 
  {
    myIndex++; //add index with every pass
    setTimeout(carousel, interval);
    Array.prototype.forEach.call(x, function(element) {
     element.classList.remove("w3-animate-fading"); //remove the fading
   });  
  }
  }
  else
  {
    
  } 

}

carousel();

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
  paused = true;
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
.w3-content.w3-display-container {
  margin-top: 100px;
}
 
 button.w3-button.w3-display-left.w3-black {
  position: relative;
  left: -50px;
}
 
 button.w3-button.w3-display-right.w3-black {
  position: relative;
  right: -118px;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-content w3-display-container " style="max-width:150px">

  <div class="w3-display-container w3-animate-fading mySlides">
      <a href="" 	target="_blank" title="slide1">
      <img class="" src="img01.jpg"	style="width:100%">
      </a>
      <div class="w3-display-bottomleft w3-large 	w3-container w3- 
  padding-16 w3-black">
        <a href="" target="_blank" title="slide1">Slide-1 (read more)</a>
    </div>
  </div>

  <div class="w3-display-container w3-animate-fading mySlides">
        <a href="" target="_blank" title="slide2">
    <img class="" src="img02.jpg" style="width:100%">
    </a>	
    <div class="w3-display-bottomright w3-large w3-container w3-padding-16     
  w3-black">
        <a href="" target="_blank" title="slide2">Slide-2 (more)</a>
    </div>
  </div>

  <div class="w3-display-container w3-animate-fading mySlides">
        <a href="" target="_blank" title="slide3">
    <img class="" src="img03.jpg" style="width:100%">
    </a>
        <div class="w3-display-topleft w3-large w3-container 
           w3-padding-16 w3-black">
        <a href="" target="_blank" title="slide3">Slide-3 (read more)</a>
        </div>
  </div>  

  <div class="w3-display-container w3-animate-fading mySlides">
        <a href="" target="_blank" title="slide4">
    <img class="" src="img04.jpg" style="width:100%">
    </a>
        <div class="w3-display-topright w3-large w3-container 
           w3-padding-16 w3-black">
        <a href="" target="_blank" title="slide4">Slide-4 (read more)</a>
        </div>
  </div>

  <div class="w3-display-container w3-animate-fading mySlides">
      <a href="" target="_blank" title="slide5">
      <img class="" src="img05.jpg" style="width:100%">
      </a>
        <div class="w3-display-middle w3-large w3-container  	
           w3-padding-16 w3-black">
        <a href="" target="_blank" title="slide5">Slide-5 (read	more)</a>
        </div>
  </div>

  <button class="w3-button w3-display-left w3-black" 
  onclick="plusDivs(-1)">&#10094;</button>
      <button class="w3-button w3-display-right w3-black" 
  onclick="plusDivs(1)">&#10095;</button>

</div>

最佳答案

好的，所以我更改了您的 slideShow，这是更新版本，现在似乎一切正常。 https://jsfiddle.net/qhx93g1q/3/ 

//Changed index so 1 is actually first image, rather than starting at 0 index
var index = 1;
var paused = false;
var slideShow = [];
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 2000; //for testing purposes

 var x = document.getElementsByClassName("slideShow");
 maxLength = x.length * loops; //times 2 for two loops
 
for (i=0; i<x.length; i++) {
  slideShow[i] = document.getElementsByClassName("slideShow")[i];
  slideShow[i].style.display = "none";
}

slideShow[0].style.display = "block";

var slides = setInterval(function() {
counter++; //adding counter
   if (counter <= maxLength) //ie counter <= 10, execute 
  {
    if (index < slideShow.length) {
  
    index++;
    showDivs();
    
    }
  else {
    index = 1;
    showDivs();
	  }
  }
	else {
	}
 },interval);

function control(n) {
  clearInterval(slides);

  if (index+n > slideShow.length) {
    index = 1;
  }
  else if (index+n <= 0) {
    index = slideShow.length;
  }
  else {
    index += n;
  }
  showDivs();
}

function showDivs() {
  //Hide all slideShow elements, and then show only the targeted element
  for (i=1; i<=slideShow.length; i++) {
    slideShow[i-1].style.display = "none";
  }
  slideShow[index-1].style.display = "block";
}
.w3-content.w3-display-container {
  margin-top: 100px;
}
 
 button.w3-button.w3-display-left.w3-black {
  position: relative;
  left: -50px;
}
 
 button.w3-button.w3-display-right.w3-black {
  position: relative;
  right: -118px;
}

.fadeIn {
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}
@keyframes fadeIn {
	from {opacity:0;}
	to {poacity:1;}
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<div class="w3-content w3-display-container " style="max-width:150px">

  <div class="w3-display-container fadeIn slideShow">
      <a href="" 	target="_blank" title="slide1">
      <img class="" src="img01.jpg"	style="width:100%">
      </a>
      <div class="w3-display-bottomleft w3-large 	w3-container w3- padding-16 w3-black">
        <a href="" target="_blank" title="slide1">Slide-1 (read more)</a>
    </div>
  </div>

  <div class="w3-display-container fadeIn slideShow">
        <a href="" target="_blank" title="slide2">
    <img class="" src="img02.jpg" style="width:100%">
    </a>	
    <div class="w3-display-bottomright w3-large w3-container w3-padding-16     w3-black">
        <a href="" target="_blank" title="slide2">Slide-2 (more)</a>
    </div>
  </div>

  <div class="w3-display-container fadeIn slideShow">
        <a href="" target="_blank" title="slide3">
    <img class="" src="img03.jpg" style="width:100%">
    </a>
        <div class="w3-display-topleft w3-large w3-container 
           w3-padding-16 w3-black">
        <a href="" target="_blank" title="slide3">Slide-3 (read more)</a>
        </div>
  </div>  

  <div class="w3-display-container fadeIn slideShow">
        <a href="" target="_blank" title="slide4">
    <img class="" src="img04.jpg" style="width:100%">
    </a>
        <div class="w3-display-topright w3-large w3-container 
           w3-padding-16 w3-black">
        <a href="" target="_blank" title="slide4">Slide-4 (read more)</a>
        </div>
  </div>

  <div class="w3-display-container fadeIn slideShow">
      <a href="" target="_blank" title="slide5">
      <img class="" src="img05.jpg" style="width:100%">
      </a>
        <div class="w3-display-middle w3-large w3-container  	
           w3-padding-16 w3-black">
        <a href="" target="_blank" title="slide5">Slide-5 (read	more)</a>
        </div>
  </div>

  <button class="w3-button w3-display-left w3-black" onclick="control(-1)"><</button>
      <button class="w3-button w3-display-right w3-black" onclick="control(1)">></button>

</div>

关于javascript - 在自动 Javascript 幻灯片中单击箭头时出现空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46650855/

上一篇：css - 在屏幕外启动 flex 元素以动画到位

下一篇：html - 相同的像素值导致不同的大小

相关文章：

javascript - JavaScript/Node 中如何调用它？

javascript - 突变观察者事件新值

javascript - angularfiresignedIn 函数仅在页面刷新时评估？

css - 在较小的屏幕上截断标签，同时在较大的屏幕上保持输入位置

css - 幻灯片动画在 Firefox 25.0 中不起作用

javascript - 如何让 ResponsiveSlides 幻灯片在 Internet Explorer 中运行？

javascript - 通过JQuery根据子图片名称删除一个元素

javascript - 获取 Object.freeze 只能在 Android 上的对象上调用

javascript - 如何进一步扩展切换侧边栏

javascript - 如何减慢 html 中图像幻灯片的播放速度？

©2024 IT工具网  联系我们