Question

＆＃13;

<!DOCTYPE html>

<html>

<head>

<title>Hello</title>

<meta http-equiv="Content-Type" type="text/html" charset="UTF-8"/>

<style>

*{margin:0; padding:0;}

.mySlides{
          position:relative;
		  width:1000px;
		  margin:40px auto;
		  display:table;
		 }
		 
.number{
        position:absolute;
		margin:20px;
	   }
	   
.text{
      position:absolute;
	  bottom:20px;
	  text-align:center;
	  width:100%;
	 }
	 
.prev, .next{
             position:absolute;
			 top:40%;
			 background-color:black;
			 color:white;
			 padding:20px;
			 cursor:pointer;
			 user-select:none;
	        }
			
.next{
      right:0;
	 }

.text-align{
            text-align:center;
		   }
	 
.dot{
     width:30px;
	 height:30px;
	 background-color:gray;
	 display:inline-block;
	}
	
.dot.active, .dot:hover{
                        background-color:orange;
					   }

</style>

</head>

<body>

<div class="mySlides">
<div class="number">1/4</div>
<img src="images/slide1.jpg" width="100%"/>
<div class="text">Text 1</div>
</div>

<div class="mySlides">
<div class="number">2/4</div>
<img src="images/slide2.jpg" width="100%"/>
<div class="text">Text 2</div>
</div>

<div class="mySlides">
<div class="number">3/4</div>
<img src="images/slide3.jpg" width="100%"/>
<div class="text">Text 3</div>
</div>

<div class="mySlides">
<div class="number">4/4</div>
<img src="images/slide4.jpg" width="100%"/>
<div class="text">Text 4</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>

<div class="text-align">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>

<script>
var slideIndex=1;
showSlides(slideIndex);

function plusSlides(n){

showSlides(slideIndex+=n);

}

function currentSlide(n){

showSlides(slideIndex=n);

}

function showSlides(n){

var i;

var slides=document.getElementsByClassName("mySlides");

var dots=document.getElementsByClassName("dot");

if(n>slides.length){slideIndex=1;}

if(n<1){slideIndex=slides.length;}

for(i=0; i<slides.length; i++){

slides[i].style.display="none";

}

for(i=0; i<dots.length; i++){

dots[i].className=dots[i].className.replace("active", "");

}

slides[slideIndex-1].style.display="block";

dots[slideIndex-1].className+=" active";

}
</script>

</body>

</html>

＆＃13;

如何在javascript中每3秒逐个更改图像（滑块）？

我知道我必须使用setTimeout（showSlides，3000）;我需要实施哪些额外代码？

当我使用slideIndex ++时;和setTimeout（showSlides，3000）;图像/滑块每3秒更改一次，但当我点击滑块按钮时，我发现滑块/图像与滑块按钮不匹配。如何将滑块按钮与这些图像/滑块匹配？

Answer 1

您最好使用Owl Carousel

自编码滑块未用于商业开发

但如果我们继续这样做，那么here is the working example

我在下面添加了4行：

var timer = setInterval(function(){
    slideIndex++;
    showSlides(slideIndex);
},3000);

它有效，看不出任何麻烦

我明白你需要什么吗？

Answer 2

虽然我会重构您的代码，但我认为您现在需要添加的是：

setInterval(function(){ plusSlides(1); }, 3 * 1000)

Answer 3

试试这个：

<!DOCTYPE html>
<html>
<head>
<style>
.mySlides {display:none;}
</style>
</head>
<body>
<div style="max-width:500px">
<div class="mySlides">
  <img  src="https://sites.google.com/a/bvsd.org/hannahisacornsnake/_/rsrc/1487361727251/home/snakey-pictures/Screenshot%202017-01-09%20at%202.47.56%20PM.png" style="width:100%">
  <p>Snake 1</p>
<p>1/4</p>
    </div>
    <div class="mySlides">
  <img  src="https://lh3.googleusercontent.com/VDfq9_C7lxXJAetQ_nuOZOWP89NcLK2DIo1jA3eKxlmLRsUp7FuZlAaXyoPh-1Ys9KEv3wzgCJantNie66YVwCnlpJjtwbz1AcnmiUagIcIb1E88ZPzKndZBav-4SIOalfoS1cwtVXmNg483z77BtZMJilnTBgOP_Gz1V8S0uTfLo_9vOK8UYGI5g6Uby7Y6uOarmgW013qz44X_VEI9yn4DIcqrpPV7wsuPxO71PZG6djseyXGF7wC4MBH3lOeJgK6pwKZb0dtQsr74EMsv9iK07jXBJVmXnSGY3MResvCNFBrViayvvxGyO0LcR4ZpdIxXEZI38VqbKArcs3-ieIYPWv4DQHQmM3KD7HYh6H4nR2lsyfLShyWPiIjJN2hgKsQtJajADxpI5IdCxA98rpYlq-xTPxxYNtTbWuf9SKP1NbffRx8J9jZgyw0r6BneO5LvgK_dHIEybpMrgJ2klPQBPaYuteFMOjzIQLX10cDF61Lib0jPM3LVPeey9OfRmRbN2vexZBB8Y0PZbAtAtDkMZnWDOzDUi1qqpN0CtJLgUm-BE6U_FCNkSsqIY7i9CUdjArWl=w1366-h678" style="width:100%">
  <p>Snake 2</p>
<p>2/4</p>
    </div>
    <div class="mySlides">
  <img  src="https://sites.google.com/a/bvsd.org/hannahisacornsnake/_/rsrc/1487361731357/home/snakey-pictures/Screenshot%202017-01-09%20at%201.04.24%20PM.png?height=241&amp;width=320" style="width:100%">
  <p>Snake 3</p>
<p>3/4</p>
    </div>
    <div class="mySlides">
  <img  src="https://sites.google.com/a/bvsd.org/hannahisacornsnake/_/rsrc/1487361723876/home/snakey-pictures/Screenshot%202017-01-09%20at%202.48.18%20PM.png" style="width:100%">
  <p>Snake 4</p>
<p>4/4</p>
    </div>

</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 3000); // Change image every 3 seconds
}
</script>
</body>
</html>

我不确定你是否想要这些点......

如何在javascript中每3秒一个一个地更改图像（滑块）？

3 个答案: