javascript - JQuery 图像 slider 工作异常

Question

我已经粘贴了现成的代码来在我的网站上实现图像 slider 功能。 slider 有效，但不是它应该的方式。它不是静态的(图像在同一点发生变化)，而是图像向右跳。我做错了什么？如果有任何帮助，我将不胜感激。

代码

		

$(function() {
    var image = $("#slider img");
    var numSlides = image.length;
    var activeSlide = 0;
    var speed = 2000;
    var fade = 1000;
    var timer = setInterval(rotate, speed);
    image.eq(activeSlide).show();
    		
    function rotate() {
        activeSlide++;
    		
    	if (activeSlide == numSlides) {
            activeSlide = 0;
    		}

    		
    	image.not(activeSlide).fadeOut(fade);
    	image.eq(activeSlide).fadeIn(fade);
    		}
    });

@import 'https://fonts.googleapis.com/css?family=Vesper+Libre:400,500,700,900&subset=devanagari,latin-ext';

.navbar {
  background-color:#bcaaa4;
  height:100px;
  margin-bottom: 0 !important;
  border:none;
  /*border-bottom:1px solid black;*/
  border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

.navbar-right li a {
  font-family: 'Oswald', sans-serif;
  font-size:18px;
  color: #efebe9 !important;
  text-transform:uppercase;
}

#buy-it-now a {
  border:2px solid #efebe9;
  border-radius:50px;
}

a.navbar-brand  {
  /*background-color:red;*/
  padding:0;
  width:100px;
  height:100%;
}

#logo-img {
  padding-top:0;
  width:100px;
}

/*********** UPPER SECTION ************/
.upper-section-central-content {
  /*background-color:red;*/
  margin-top:120px;
  height:auto;
}

#upper-sec-img-wrapper img {
  width:400px;
}

#upper-sec-img-wrapper {
  width:400px;
  margin:0 auto;
}

.upper-section {
  padding-top:0 !important;
  background-color:#bcaaa4;
}

#upper-sec-words-wrapper {
  margin-top:120px;
  text-align:center;
  /*background-color:red;*/
}
#upper-sec-words-wrapper p:first-child{
  font-family:"Roboto";
  font-size:30px;
  font-weight:bold;
  color:#efebe9;
}

#upper-sec-words-wrapper p:nth-child(2){
  font-family:"Raleway";
  font-size:18px;
  font-weight:light;
  color:#efebe9;
}

/******MIDDLE SECTION*******/

.middle-section {
  background-color:#e5dfdc;
}

.mid-sec-words p {
  text-align:center;
  margin-top:70px;
  font-family:"Raleway";
  font-weight:Medium;
  font-size:30px;
  color:#d7c3e5;
}

.mid-sec-img {
  margin-top:50px;
  /*background-color:red;*/
  height:auto;
}

.inner-img {
  margin:0 auto;
  width:300px;
}

.inner-img-center {
  margin:0 auto;
  width:500px;
}

.first-fox {
  margin:0 auto;
  width:200px;
}

.inner-img img {
  padding-top:20px;
  width:100%;
}

.inner-img-center img {
  padding-top:30px;
  width:100%;
}

.gallery {
  background-color:#e5dfdc;
}
.gallery .col-md-8 {
  background-color:red;
  height:400px;
}

.gallery .col-md-4 {
  background-color:blue;
  height:400px;
}





/***** Make text responsive *****/

@media all and (max-width: 2000px) { 
/* screen size until 1200px */
  
    navbar-nav li a {
        font-size: 18px; /* 1.5x default size */
    }
}

@media all and (max-width: 1600px) { 
/* screen size until 1200px */
  
    navbar-nav li a {
        font-size: 18px; /* 1.5x default size */
    }
}

@media all and (max-width: 1200px) { 
/* screen size until 1200px */
  
    navbar-nav li a {
        font-size: 18px; /* 1.5x default size */
    }
}

@media all and (max-width: 1000px) { /* screen size until 1000px */
  
    navbar-nav li a {
        font-size: 18px; /* 1.5x default size */
    }
  
    #upper-sec-words-wrapper {
        margin-top:180px;
    }
  
    #buy-it-now a {
    border:none;
    }
  
  }
@media all and (max-width: 500px) { /* screen size until 500px */
    navbar-nav li a {
        font-size: 18px; /* 1.5x default size */
    }
  
    #upper-sec-img-wrapper img {
          width:300px;
        }
  
    #upper-sec-words-wrapper p:first-child{
      font-family:"Roboto";
      font-size:24px;
      font-weight:bold;
      color:#efebe9;
    }

    #upper-sec-words-wrapper p:nth-child(2){
      font-family:"Raleway";
      font-size:12px;
      font-weight:light;
      color:#efebe9;
    }
    .mid-sec-words p {
      font-size:24px;
    }
  
    .inner-img-center img {
      width:60%;
    }
  
    .inner-img img {
      width:80%;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img id="logo-img" src="http://www.fillfox.com/wp-content/uploads/2014/02/FILL-FOX-LOGO-ONLY3A-1024x1024.png"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Species</a></li>
        <li id="buy-it-now"><a href="#">Buy it now</a></li>
        
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<section class="upper-section">

<div class="container">
  
  <div class="row">
    
      <div class="row">
        
        <div class="col-md-6 col-md-offset-3 col-xs-12" id="upper-sec-words-wrapper">
          <p>“Sweet, Beautiful and Dangerous”</p>
          <p>ADOPT THE MOST GORGEOUS FOXES TO EMBOLISH YOUR SETTING</p>
        </div>

      </row> <!--end of inside row-->
    
    <div class="col-md-6 col-md-offset-3 col-xs-12 upper-section-central-content">
      
        <div id="upper-sec-img-wrapper">
          <img class="img-responsive" id="upper-section-img" src="http://pngimg.com/upload/fox_PNG370.png">
          
        </div>
      
    </div> <!--end of col-md-6-->
    
  </div> <!--end of row-->
  
</div><!-- /.container -->
  
</section> <!--UPPER-SECTION-->


<section class="middle-section">
  
  <div class="container">
    
    <div class="row">
      
      <div class="col-md-6 col-md-offset-3 col-xs-12 mid-sec-words">
        
        <p>Look how pretty they are!</p>
        
      </div> <!--end mid-sec-words-->
      
    </div> <!--end row-->
    
    <div class="row">
      
      <div class="col-md-4 mid-sec-img">
        
        <div class="inner-img first-fox">
          
          <img src="http://t06.deviantart.net/SYKQBb0tWScCRv1RHCj-beynIdY=/300x200/filters:fixed_height(100,100):origin()/pre15/1d3c/th/pre/i/2011/148/4/d/fox_lineart_by_neonmars-d3hf06q.png">
          
        </div>
        
      </div> <!--mid-sec-img-->
      
      <div class="col-md-4 mid-sec-img">
        
          <div class="inner-img">

              <img src="https://orig03.deviantart.net/bd8b/f/2016/002/4/3/free_to_use___fox_base_by_maonii-d9mge7j.png">

          </div>
      
      </div> <!--mid-sec-img-->
      
      <div class="col-md-4 mid-sec-img">
        
          <div class="inner-img">

                <img src="http://orig12.deviantart.net/cc3f/f/2013/186/f/8/free_new_fox_lines_by_galianogangster-d6c638n.png">

          </div>
      
      </div> <!--mid-sec-img-->
      
    </div> <!--end row-->
    
    <div class="row">
      
      <div class="col-md-6 col-md-offset-3 col-xs-12">
        <div class="inner-img-center">
          <img src="http://orig01.deviantart.net/80a2/f/2015/283/e/7/_cm__red_fox_by_cylithren-d9cmeb6.gif">
        </div>
      </div>
      
    </div> <!--row-->
    
  <div>  <!--container-->
  
</section> <!--middle-section-->
    
<section class="gallery">
  
  
  <div class="container">
    
    <div class="row">
      
      <div class="col-md-8">
        
        <div id="slider">
          
          <img src="http://placekitten.com/200/200?image=1">
          <img src="http://placekitten.com/200/200?image=2">
          <img src="http://placekitten.com/200/200?image=3">
          <img src="http://placekitten.com/200/200?image=4">
          <img src="http://placekitten.com/200/200?image=5">
          <img src="http://placekitten.com/200/200?image=6">
          <img src="http://placekitten.com/200/200?image=7">
          
        </div> <!--slider-->
        
      </div> <!--col-md-8-->
      
      <div class="col-md-4">
        
      </div>
      
    </div> <!--row-->
  </div> <!--container-->
  
  
</section>

Answer 1

Lee 是对的，我将图像定位为绝对，但效果不佳。顺便问一下，我如何拉伸(stretch)图像以覆盖整个 div (col-md-8)？就像图片上一样。我尝试将 slider div 的宽度设置为 100%，将图像设置为 100%，但图像溢出父 div。