自动滑块动画不起作用

时间：2018-08-16 18:43:35

标签： javascript html css

我最近在我的网站上为我的滑块实现了自动滑块代码，但是由于某些原因，它无法正常工作。 CSS样式表中滑块动画的代码在底部附近。我想知道是否有人可以帮助我解决我的代码问题。

这是我的滑块的图片，只希望自行车的图像自动移动。
enter image description here

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：

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
}

1 个答案:

答案 0 :(得分：0)

将此说明添加到您的JS代码中：

slidePlus

每隔1000毫秒调用一次方法{{1}}

相关问题
最新问题