1. 首頁
  2. 問答
  3. JQuery圖像滑塊工作得很好

JQuery圖像滑塊工作得很好

2016-07-15 123 views
0

我粘貼了隨時可用的代碼，以在我的網站上實現圖像滑塊功能。滑塊工作，但不是它應該的方式。它不是靜態的（圖像在同一個地方變化），但圖像跳轉到右側。我做錯了什麼？我將不勝感激任何幫助。JQuery圖像滑塊工作得很好

代碼

\t \t 
 

 
$(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(); 
 
    \t \t 
 
    function rotate() { 
 
     activeSlide++; 
 
    \t \t 
 
    \t if (activeSlide == numSlides) { 
 
      activeSlide = 0; 
 
    \t \t } 
 

 
    \t \t 
 
    \t image.not(activeSlide).fadeOut(fade); 
 
    \t image.eq(activeSlide).fadeIn(fade); 
 
    \t \t } 
 
    });
@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>

來源

2016-07-15 NZMAI

+1

大概是因爲被裝載在同一時間兩個滑動，因此會顯示彼此相鄰直到第一個消失。我認爲你應該一次加載所有的，並使用絕對定位。你可以在他們之間褪色，而他們留在同一個地方。 – Lee

+0

您不需要包含您的所有網站代碼。順便說一句，如果我理解正確，圖像應淡出並淡入？因爲這不是*滑動*本身 – Aziz

回答

0

李是對我的定位後圖像絕對不是它工作正常。順便說一下，我怎麼可以拉伸圖像，以便覆蓋整個div（col-md-8）？就像在圖像上一樣。我嘗試將滑塊div的寬度設置爲100％，並將圖像設置爲100％，但圖像溢出父div。

enter image description here

來源

2016-07-15 12:22:37 NZMAI

相關問題

 相關問題