javascript - 为什么按钮元素不改变图片？

Question

所以我正在努力创建自己的网站。我刚刚开始制作网站的“关于我”部分，我想添加一个幻灯片来展示我的生活和兴趣的图片。我使用了“Jon Duckett 的 Jquery & Javascript” 书中的代码，但由于某种原因，当我单击按钮切换到下一张幻灯片时，没有任何反应。

/*jslint browser: true*/
/*global $, jQuery, alert*/

$('.slider').each(function () {
    'use strict';
    var $this = $(this),                   //For every slider
        $group = $this.find('.slides'),  //Gets the current slider
        $slides = $this.find('.slide'),      //Gets the slide-group(container)
        buttonArray = [],                   //jQuery object to hold all slides
        currentIndex = 0,                   //Create array to hold nav buttons
        timeout;                           //Used to store the timer



    function move(newIndex) {
        var animateLeft, slideLeft;                   //Declare variables 

        //advance(); 


        //if current slide is showing or a slide is animating, then do nothing
        if ($group.is(':animated') || currentIndex === newIndex) {
            return;
        }

        buttonArray[currentIndex].removeClass('active');   //Remove class from item
        buttonArray[newIndex].addClass('active');  //Add class to new item

        if (newIndex > currentIndex) {
            slideLeft = '100%';
            animateLeft = '-100%';      //Animate the current group to the left
        } else { 
            slideLeft = '-100%';
            animateLeft = '100%';
        }

        //Position new slide to left (if less) or right (if more) of current
        $slides.eq(newIndex).css({left: slideLeft, display: 'block'});
        $group.animate({left: animateLeft}, function () {
            $slides.eq(currentIndex).css({display: 'none'});
            $slides.eq(newIndex).css({left: 0});
            $group.css({left: 0});
            currentIndex = newIndex;
        });
    }

    function advance() {
        clearTimeout(timeout);  //Clear timer stored in timeout
        //Start timer to run an anonymous function every 4 seconds
        timeout = setTimeout(function () {
            if (currentIndex < ($slides.length - 1)) {  //If not the last slide 
                move(currentIndex + 1);                 //Move to next slide 
            } else {                                    //Otherwise                 
                move(0);                                //Move to the first slide
            }
        }, 4000);                                       //Milliseconds timer will wait
    }

    $.each($slides, function (index) {
        //Create a button element for the button
        var $button = $('<button type="button"  class="slide-btn">&bull;</button>');
        if (index === currentIndex) {
            $button.addClass('active');
        }
        $button.on('click', function () {
            move(index);
        }).appendTo($this.find('.slide-buttons'));
        buttonArray.push($button);
    });

    advance();

});

html {
    height: 100%;
}


h1 {
    color: white;
    text-align: center;
}

h2{
    color: white;
}
h3 {
    color: white;
}
body{ min-height:100%; 
    padding:0; 
    margin:0; 
    position: relative; 
    overflow-x:hidden;
}
#IDE{
    background-color: white;
    width: 60%;
}
#banner {
    position: absolute;
    top: -20px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 200px;
    z-index: -1;
}
#picture {
    /* border: 50px solid black;*/
    border-radius: 10px;
    display:block;
    margin: 0px auto; 


}
#Paragraph{
    color:white;
    font-size:130%;
}

#Navbar
{
    /*list-style-type: none;*/
    margin: 100px;
    margin-right: -10px;
    margin-left: 0px;
    padding: 0;
    overflow: hidden;
    /*background-color: orange;*/
    background: #1e5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    /*background-image: url("https://www.transparenttextures.com/patterns/black-orchid.png");*/
    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! ");*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#Navbar a {
    display: block;
    padding: 14px;
    /* background: #e2e2e2;*/
    background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); 
    background: -ms-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); 
    background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    /* background-color: dodgerblue;
    background-image: url("https://www.transparenttextures.com/patterns/fake-brick.png");
    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

table {
    margin-top: 260px;
    color: white;
    background-color: black;
}
#Navbar li {

    display:inline-block;
    margin-right:0px;
    font-weight: bold;
    color: white;
    float: left;
    border-right: 0px solid #bbb;
}
#Skillset{
    list-style-type: disc;
    color: white;
}
li a, .dropbtn{
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn{
    /* background-color:#111;*/
    background-color: black;
    color: red;
    text-shadow: 0 0 20px blue, 0 0 10px lime;
    font-style: oblique;
    text-decoration:underline;
    background-color: green;
}
#Skillset ul li{
    list-style-type: disc;
}
li.dropdown{
    display:inline-block;
}
.active {
    background-color: #4CAF50;

}


/* THe container <div> - needed to position the drop down content*/
/*.dropdown{
position: relative;
display: inline-block;
}*/
/*Drop down content hidden by default*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color:#f9f9f9;
    min-width;160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/*Links inside the dropdown*/
.dropdown-content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align:left;
}

/*Changes color of dropdown links hover*/
.dropdown-content a:hover {background-color:black;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

#sidebar_container
{ float: right;
    width: 300px;}

.sidebar_base
{ width: 200px;
    height: 14px;
    background-color: black;}

.sidebar
{ float: right;
    width: 290px;
    padding: 0;
    margin: 100px 0 16px 0;



}

.sidebar_item
{ background-color: black;
    padding: 0 15px;
    width: 250px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    height: 1000px;

}

.sidebar li a.selected
{ color: #444;} 

.sidebar ul
{ margin: 0;} 

.footer {
    position: absolute;
    bottom: -1100px;
    padding: 1rem;
    background-color: black;
    text-align: center;
    width: 100%;

}

.footer p
{ line-height: 1.7em;
    padding: 0 0 10px 0;
    color: white;

}

.footer a
{ color: #A8AA94;
    text-decoration: none;
}

.footer a:hover
{ color: blue;
    text-decoration:underline;
}

.slider {
max-height: 430px;
  max-width: 940px;
  margin: 0px auto 30px auto;}
slide-viewer {
    position:relative;
    overflow: hidden;
    height: 300%;
}
.slide-group{
    width:100%;
    height:100%;
    position:relative;
}
.slide{
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
.slide:first-child{
    display: block;
}

.slide-buttons {
  text-align: right;
}

.slide-btn {
  border:none;
  background: none;
  color: red;
  font-size: 200%;
    line-height: 0.5em;}

.slide-btn.active, .slide-btn:hover {
  color: #ed8e6c;
  cursor: pointer;}

button {
  font-size: 90%;
  text-align: left;
  text-transform: uppercase;}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

<!DOCTYPE HTML>
<html id="About Me">
    <style>
        body {

            background-image: url("http://wallpaperrs.com/uploads/3d-abstract/blue-square-pattern-wide-wallpaper-13878.jpg");
            background-size: auto;
        }
    </style>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, intial-scale-1">
        <title>Bart Allen</title>

        <h1>Bartholomew Allen</h1>

        <ul id="Navbar">
            <!-- Each of the linked list are referenced as links that lead to alterantive pages-->
            <li><a href="index.html">HOME</a></li>
            <li><a href="Purpose.html">Purpose</a></li>
            <li class="dropdown" >
                <a href="javascript:void(0)" class="dropbtn">My Projects</a>
                <div class="dropdown-content">
                    <a href="#">C++</a>
                    <a href="#">Java</a>
                </div>
            </li>
            <li><a href="https://www.linkedin.com/in/bartholomew-allen-928350143/" target="_blank">LinkedIn Profile link</a></li>
            <li style="float:right"><a class="active" href="About me.html">About me</a></li>
        </ul>
        <!--The '#' are used as text links, once the other pages are created then they will use urls-->
    </head>

    <body>
        <link rel="stylesheet" href="main.css">

        <img id="banner" src="https://math.columbusstate.edu/images/math_banner.jpg" alt="Banner Image"/>
        <section> 
            <div class="slider">
                <div class="slide-viewer">
                    <div class="slide-group">
                        <div class="slide slide-1"> 
                            <img  src="C:\Users\barta\Desktop\Personal website\About Me slide show\CCBC Essex Logo.jpg" height="350px" width="860px"> 
                        </div>
                        <div class="slide slide-2">
                            <img src="C:\Users\barta\Desktop\Personal website\About Me slide show\Cross Country.jpg" height="350px" width="860px"> 
                        </div> 
                        <div class="slide slide-3">
                        <img src="C:\Users\barta\Desktop\Personal website\About Me slide show\TU Logo.jpg">
                        </div>
                        <div class="slide slide-4">
                        <img src="C:\Users\barta\Desktop\Personal website\About Me slide show\Jessica And I.jpg">
                        </div>
                    </div>
                </div>
                <div class="slide-buttons">
                    <button type="button" class="slide-btn">*</button>
                    <button type="button" class="slide-btn">*</button>
                    <button type="button" class="slide-btn">*</button>
                    <button type="button" class="slide-btn">*</button>
                </div>
            </div>
        </section>

        <div id="sidebar_container">
            <div class="sidebar">
                <div class="sidebar_top"></div>
                <div class="sidebar_item">
                    <h2>Skillset Currently</h2>
                    <h3>Programming languages known:</h3>
                    <div id="Skillset">
                        <ul>
                            <li>Java</li>
                            <li>C++</li>
                            <li>Javascript</li>
                            <li>JQuery</li>
                            <li>CSS</li>
                            <li>HTML</li>
                        </ul>
                        <br>
                        <h3>Mathematics taken</h3>
                        <ul>
                            <li>Linear Algebra</li>
                            <li>Calculus I</li>
                            <li>Calculus II</li>
                            <li>Discrete Mathematics</li> 
                        </ul>
                        <br>
                    </div>
                </div>
            </div >
        </div>




        <footer>
            <div id="content_footer"></div>
            <div class="footer">
                <p><a href="index.html">HOME</a> | <a href="Purpose.html">Purpose</a> | <a href="#">My Project</a>

                </p>
                <p>Copyright&copy; Bartholomew Allen</p> 


            </div>
        </footer>

        <script src="js/jquery-1.11.0.min.js"></script>

        <script src="js/slider.js"></script>
        <!--<script type="text/jquery.cycle2.min.js" src="js/jquery.cycle2.min.js"> </script>

</body>

</html>

我正在尝试创建这个 Content Panels- Responsive Slider

Answer 1

除非您想重新发明轮子本身，[请参阅下面的示例实现]您可以使用 jquery ui carousel

http://code.runnable.com/WY_gouUfKGNOY4ET/output

或 Bootstrap 创建轮播。

https://getbootstrap.com/docs/3.3/examples/carousel/