我已经粘贴了现成的代码,可以在我的网站上实现图像滑块功能。滑块工作但不是应该的方式。它不是静态的(图像在同一点上变化),但图像跳到右侧。我做错了什么?我将不胜感激任何帮助。
代码
$(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>
&#13;