自动滑块动画不起作用

Question

I recently implemented an automatic slider code for my slider in my website, however, it's not working for some reason. 我最近在网站上为我的滑块实现了自动滑块代码，但是由于某种原因，它无法正常工作。 The code for the slider animation in the CSS style sheet is near the bottom. CSS样式表中滑块动画的代码在底部附近。 I was wondering if anybody could help me in solving the problem with my code. 我想知道是否有人可以帮助我解决我的代码问题。

Here is a picture of my slider, just want the images of the bikes to move automatically. 这是我的滑块的图片，只希望自行车的图像自动移动。

HTML: HTML：

<!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>Croydon Cycles</title>
      <link rel="stylesheet" href="shop-style.css">
      <link rel="shortcut icon" type="image/png" href="images/favicon.png">
      <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="parallax.min.js"></script>
</head>


<!DOCTYPE html>
<html lang="en">

<body>
    <div class="wrapper">
        <header>

                <nav>

                    <div class="menu-icon">
                            <i class="fa fa-bars fa-2x"></i>
                    </div>

                    <div class="logo">
                            Croydon Cycles
                    </div>

                    <div class="menu">
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li><a href="#">Location</a></li>
                                <li><a href="shop.html">Shop</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                    </div>
                </nav>

        </header>

        <div class="slider">
                <div class="slideshow-container">


                        <div class="myslides fade">

                        <div class="numbers">1 / 4</div>

                        <div class="slider-pic"><img class="Fit" src="images/slider-1.jpg"></div>

                        <div class="caption">Kona Lanai 27.5" 2018 Mountain bike</div>

                        </div>


                        <div class="myslides fade">

                        <div class="numbers">2 / 4</div>

                        <div class="slider-pic"><img class="Fit"  src="images/slider-2.jpg"></div>

                        <div class="caption">Decathlon B'twin Rockrider 520S Full Suspension Mountain Bike</div>

                        </div>


                        <div class="myslides fade">

                        <div class="numbers">3 / 4</div>

                        <div  class="slider-pic"><img class="Fit" src="images/slider-3.jpg"></div>

                        <div class="caption">Ribble Aero 883 Carbon Road Bike - Matte Black</div>

                        </div>


                        <div class="myslides fade">

                        <div class="numbers">4 / 4</div>

                        <div class="slider-pic"><img class="Fit" src="images/slider-4.jpg"></div>

                        <div class="caption">Lapierre Overvolt AM700i</div>

                        </div>


                        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

                        <a class="next" onclick="plusSlides(1)">&#10095;</a>

                </div>
        </div>  
        <br>


        <div style="text-align:center">

                <span class="dots" onclick="currentSlide(1)"></span> 

                <span class="dots" onclick="currentSlide(2)"></span> 

                <span class="dots" onclick="currentSlide(3)"></span> 

                <span class="dots" onclick="currentSlide(4)"></span> 

        </div>


        <script type="text/javascript">

        var slideIndex = 1;

        showSlide(slideIndex);


        function plusSlides(n){

        showSlide(slideIndex += n);

        }


        function currentSlide(n) {

        showSlide(slideIndex = n);

        }


        function showSlide(n){

        var i;

        var slides = document.getElementsByClassName("myslides");

        var dots = document.getElementsByClassName("dots");

        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>

        <div class="content">

        </div>
    </div>


    <script type="text/javascript">

    // Menu-toggle button

    $(document).ready(function() {
        $(".menu-icon").on("click", function() {
                $("nav ul").toggleClass("showing");
        });
    });

    // Scrolling Effect

    $(window).on("scroll", function() {
        if($(window).scrollTop()) {
                $('nav').addClass('black');
        }

        else {
                $('nav').removeClass('black');
        }
    })


    </script>

</body>
</html>

CSS: CSS：

html, body {

    margin: 0;
    padding: 0;
    width: 100%;
    font-family: verdana,sans-serif;
    margin: 0;
    font-family: "Helvetica Neue",sans-serif;
    font-weight: lighter;

}



header {
    width: 100%;
    height: 60px;
    background: url(hero.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.content {
    width: 94%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}


.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
    z-index:2;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}

@media(max-width: 786px) {

    .logo {
          position: fixed;
          top: 0;
          margin-top: 16px;
    }

    nav ul {
          max-height: 0px;
          background: #000;
    }

    nav.black ul {
          background: #000;
    }

    .showing {
          max-height: 34em;
    }

    nav ul li {
          box-sizing: border-box;
          width: 100%;
          padding: 24px;
          text-align: center;
    }

    .menu-icon {
          display: block;
    }

}

body{
    font-family: verdana,sans-serif;

    margin: 0;

}

.slideshow-container{

    width: 100%;

    position: relative;

    margin: auto;


}

.numbers{

position: absolute;

top: 0;

color: #f2f2f2;

padding: 8px 12px;

font-size: 12px;

}

.myslides{

display: none;

}

.prev , .next{

position: absolute;

top: 50%;

font-size: 18px;

font-weight: bold;

padding: 16px;

margin-top: -22px;

border-radius: 0 3px 3px 0;

color: black;

cursor: pointer;

}

.next{

right: 0;

border-radius: 3px 0 0 3px;

}

.prev:hover,.next:hover{

background-color: rgba(0,0,0,0.8);

}

.caption{

text-align: center;

position: absolute;

bottom: 8px;

width: 100%;

color: black;

font-size: 15px;

padding: 8px 22px;

left:-2%;

}

.dots{

width: 13px;

height: 13px;

background: gray;

display: inline-block;

border-radius: 50%;

cursor: pointer;

}

.fade{

animation-name:fade;

animation-duration:1.5s;

}

@keyframes fade{

from {opacity: 0.4;}

to {opacity: 1;}

}

.active, .dot:hover {

background-color: #333;

}

.slider-pic {
    display: grid;
    height: 100%;
    z-index:0;
}

.Fit {

    max-width: 100%;
    max-height: 100vh;
    margin: auto;
    z-index:0;  

}

@keyframes slider{
    0%{
        left: 0;
    }

    20%{
        left: 0;
    }

    25%{
        left: -100%;
    }

    45%{
        left: -100%;
    }

    50%{
        left: -200%;
    }

    70%{
        left: -200%;

    }


    75%{
        left: -300%;
    }

    95%{
        left: -300%;
    }

    100%{
        left: -400%;
    }

}

#slider {
    overflow: hidden;

}

#slider figure img  {
    width:20%;
    float: left;
}

#slider figure   {
    position: relative;
    width: 500%;
    margin:0;
    left:0;
    animation: 20s slider infinite
}

Answer 1

Add this instruction in your JS code: 在您的JS代码中添加以下说明：

$(document).ready(function() {
    $(".menu-icon").on("click", function() {
            $("nav ul").toggleClass("showing");
    });
    // add this instruction !
    setTimeout(function() {plusSlides(1) }, 1000)
})

Herem the method slidePlus is called every 1000ms Herem方法slidePlus被称为每1000毫秒

自动滑块动画不起作用

问题描述

1 个解决方案

解决方案1
0 2018-08-16 19:02:17

自动滑块动画不起作用

问题描述

1 个解决方案

解决方案1 0 2018-08-16 19:02:17

解决方案1
0 2018-08-16 19:02:17