ボタンの要素が画像を変更しないのはなぜですか？

Question

私は自分のウェブサイトを作っている途中です。私はちょうどウェブサイトの私のセクションについて作業を始めました。私は私の人生と興味の写真を紹介するスライドショーを追加したかったのです。私は本のコード"Jquery & Javascript by Jon Duckett"のコードを使用しましたが、何らかの理由でボタンをクリックして次のスライドに変わることはありません。

/*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>

あなたはホイール自体を再発明する場合を除き、私はあなたがjqueryのUIカルーセルを使用することができます[以下の実装例を参照してください]、まさにこの Content Panels- Responsive Slider

Answer 1

を作成しようとしている は

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

またはカルーセルを作成するためのブートストラップ。

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