Question

当我按下幻灯片上的按钮时，我想移动幻灯片。但是我不能。将按钮的CSS更改为活动状态是成功的，但是当我按下按钮时，它仍然无法移动屏幕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        *{margin:0; padding: 0;}
        li{list-style: none;}
        .dots{width:20px; height: 20px; border-radius: 50%; background-color: #124412;}
        .active{width:20px; height: 20px; border-radius: 50%;background-color: #fff;}
        #slide{}
        #slide ul
        #slide ul li{}
        .container{width: 900px; margin: 0 auto;}


    </style>
</head>
<body>

    <div id="slide_wrap">
        <div class="container">
            <div id="slide">
                <ul>
                    <li><a href="#"></a><img src="slideimg/1.jpg" alt="1"></li>
                    <li><a href="#"></a><img src="slideimg/2.jpg" alt="2"></li>
                    <li><a href="#"></a><img src="slideimg/3.jpg" alt="3"></li>
                    <li><a href="#"></a><img src="slideimg/4.jpg" alt="4"></li>
                    <li><a href="#"></a><img src="slideimg/5.jpg" alt="5"></li>
                </ul>
            </div>
            <div id="dot">
            </div>
            <div id="arrow">
                <div id="left-arrow">left</div>
                <div id="right-arrow">right</div>
            </div>
        </div>

    </div>


    <script>

        var width = 640;
        var height = 480;
        var length = document.querySelectorAll('#slide li').length;

        var slide = document.querySelector('#slide');
        var slideUl = document.querySelector('#slide ul');
        var slideLi = document.querySelectorAll('#slide li');

        slide.style.width = width + "px";
        slide.style.height = height + "px";
        slide.style.overflow = "hidden";

        slideUl.style.width = width*length +"px";


        for(var i=0; i < slideLi.length; i++){
            var item = slideLi.item(i);
            item.style.width = width + "px";
            item.style.height = height + "px";
            item.style.cssFloat = "left";
        }

        var dot = document.getElementById('dot');
        for(var i = 0; i < slideLi.length; i++){
            var btn = document.createElement('button');
            btn.classList.add('dots');
            dot.appendChild(btn);
            //btn.setAttribute('onclick','moveTo('+i+')');
        }       





        var dots = document.querySelectorAll('.dots');


        function moveTo(index){
            index = index || 0;
            index = index % length;


            slideUl.style.marginLeft = "-"+width*index+"px";

            for(var i = index ; i < dots.length ; i++){
                for(var j = 0; j < dots.length ; j++){
                    if(dots[j].classList.contains('active')){
                        dots[j].classList.remove('active');
                    }
                }
                dots[index].classList.add('active');      

            }
        }

        for(var i = 0 ; i < dots.length ; i++){

        dots[i].addEventListener('click', function(e){
            for(var j = 0 ; j < dots.length ; j++){
                if(dots[j].classList.contains('active')){
                    dots[j].classList.remove('active');
                }
            e.target.classList.add('active').moveTo(i);
            }
        })



        }






        var index = 0;
        //left
        function slideLeft(){
            slideUl.style.marginLeft = "-"+width*(index-1)+"px";
            index--;
        }


        //left click
        var arrowLeft = document.getElementById('left-arrow');
        arrowLeft.addEventListener('click', function(){
            console.log(index)
            if(index === 0){
                index = slideLi.length;
            }
            slideLeft();
        });

        //right
        function slideRight(){
            slideUl.style.marginLeft = "-"+width*index+"px";
            index++;
        }

        //right click
        var arrowLeft = document.getElementById('right-arrow');
        arrowLeft.addEventListener('click', function(){
            console.log(index)
            if(index === length){
                index = 0;
            }
            slideRight();
        });

        var currentIndex = 0;
        setInterval(function(){
            currentIndex += 1;
            moveTo(currentIndex)
        },1000 * 1.5);

        moveTo(0)
    </script>
</body>
</html>

Answer 1

滑块

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";
}

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

获取更多信息：https://www.w3schools.com/howto/howto_js_slideshow.asp

如何修复纯JavaScript滑块代码以移动屏幕？

1 个答案: