html-css Auto-Schieberegler funktioniert nicht

Versuchen Sie, Slider zu machen, alles gut funktioniert, mit Ausnahme der Schaltfläche Hover, wenn die Folie nicht mit dem Schieberegler ändern ändern.html-css Auto-Schieberegler funktioniert nicht

this is link for the photo number 3 but the hover color on the button number 1

Sie können den Code-Schnipsel ausführen und überprüfen.

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

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

 
function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("demo"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" w3-white", ""); 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " w3-white"; 
 
} 
 
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, 2500); // Change image every 2 seconds 
 
    
 
}

.mySlides {display:none} 
 
.w3-left, .w3-right, .w3-badge {cursor:pointer} 
 
.w3-badge {height:13px;width:13px;padding:0}

<!DOCTYPE html> 
 
<html> 
 
<title>W3.CSS</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 

 
<body> 
 

 
<div class="w3-content w3-display-container" style="max-width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%"> 
 
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> 
 
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> 
 
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(5)"></span> 
 
    </div> 
 
</div> 
 

 

 
</body> 
 
</html>

so dass jede Hilfe dieses Problem zu lösen, bitte!

Quelle

2017-05-18 safa jaafreh

Sie haben vergessen, in der "Karussell" Funktion, um den Code zu setzen, die den richtigen Punkt betont:

// I moved these here because if the number of images is always the same, 
 
// why search for these elements every time? 
 
var x = document.getElementsByClassName("mySlides"); 
 
var dots = document.getElementsByClassName("demo"); 
 

 
var slideIndex = 1; 
 
showDivs(slideIndex); 
 

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

 
function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" w3-white", ""); 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " w3-white"; 
 
} 
 
var myIndex = 0; 
 
carousel(); 
 

 
function carousel() { 
 
    var i; 
 
    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"; 
 
    for (i = 0; i < dots.length; i++) { 
 
     dots[i].className = dots[i].className.replace(" w3-white", ""); 
 
    } 
 
    dots[myIndex-1].className += " w3-white"; 
 
    setTimeout(carousel, 2500); // Change image every 2 seconds 
 
}

.mySlides {display:none} 
 
.w3-left, .w3-right, .w3-badge {cursor:pointer} 
 
.w3-badge {height:13px;width:13px;padding:0}

<!DOCTYPE html> 
 
<html> 
 
<title>W3.CSS</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 

 
<body> 
 

 
<div class="w3-content w3-display-container" style="max-width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%"> 
 
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> 
 
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> 
 
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(5)"></span> 
 
    </div> 
 
</div> 
 

 

 
</body> 
 
</html>

Quelle

2017-05-18 07:48:30 nonzaprej

Thank you ,,, es ist Arbeit –

html-css Auto-Schieberegler funktioniert nicht

Antwort

Verwandte Themen