Jquery的圖像滑塊行爲不

http://coolcarousels.frebsite.nl/c/58/coolcarousel.html

，並希望實現它。我複製並粘貼了javascript，css和html。

這裏的網站：http://violetoeuvre.com/slider.html

HTML：

<script> 

$(function() { 

    $('#carousel').carouFredSel({ 
     width: 800, 
     items: 3, 
     scroll: 1, 
     auto: { 
      duration: 1250, 
      timeoutDuration: 2500 
     }, 
     prev: '#prev', 
     next: '#next', 
     pagination: '#pager' 
    }); 

}); 

</script> 
</div> 
<div> 

<div id="wrapper"> 
    <div id="carousel"> 
     <img src="img_slider/1.jpg" /> 
     <img src="img_slider/2.jpg" /> 
     <img src="img_slider/3.jpg" /> 
     <img src="img_slider/4.jpg" /> 
     <img src="img_slider/5.jpg" /> 
     <img src="img_slider/6.jpg" /> 
    </div> 
    <a id="prev" href="#"></a> 
    <a id="next" href="#"></a> 
    <div id="pager"></div> 
</div> 
</div>

CSS：

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
body { 
    background-color: #ff00ff; 
    min-height: 700px; 
} 
body * { 
    font-family: Arial, Geneva, SunSans-Regular, sans-serif; 
    font-size: 14px; 
    color: #333; 
    line-height: 22px; 
} 

#wrapper { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-radius: 100px; 
    width: 800px; 
    height: 127px; 
    padding: 10px; 
    margin: -75px 0 0 -410px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 
.caroufredsel_wrapper { 
    border-radius: 90px; 
} 
#carousel img { 
    width: 201px; 
    height: 127px; 
    margin: 0 5px; 
    float: left; 
} 
#prev, #next { 
    background: transparent url(img/carousel_control.png) no-repeat 0 0; 
    text-indent: -999px; 
    display: block; 
    overflow: hidden; 
    width: 15px; 
    height: 21px; 
    position: absolute; 
    top: 65px; 
} 
#prev { 
    background-position: 0 0; 
    left: 30px; 
} 
#prev:hover { 
    left: 29px; 
}   
#next { 
    background-position: -18px 0; 
    right: 30px; 
} 
#next:hover { 
    right: 29px; 
}    
#pager { 
    text-align: center; 
    margin: 0 auto; 
    padding-top: 20px; 
} 
#pager a { 
    background: transparent url(img/arrow1.png) no-repeat -2px -32px; 
    text-decoration: none; 
    text-indent: -999px; 
    display: inline-block; 
    overflow: hidden; 
    width: 8px; 
    height: 8px; 
    margin: 0 5px 0 0; 
} 
#pager a.selected { 
    background: transparent url(img/arrow2.png) no-repeat -12px -32px; 
    text-decoration: underline;    
}

我下載的JavaScript zip文件，我敢肯定，那就是缺少在代碼中使一切正常。我對此很陌生，我只是不知道該放哪一部分。在腳本中？在另一個參考文件？（試過這些）。

在此先感謝。克萊爾

來源

2013-04-26 Claire

什麼部分不工作？你有什麼錯誤嗎？ – lifetimes 2013-04-26 15:47:09

沒有錯誤，謝謝 – Claire 2013-04-26 15:48:21

以及我只是訪問該網站得到2錯誤... – Alex 2013-04-26 15:49:19

摑我，如果我錯了，但我沒有看到你的頁面上有任何jQuery：3

來源

2013-04-26 15:49:00 Alex

對，所以我把它放在哪裏？在與JavaScript？ – Claire 2013-04-26 15:50:36

在執行任何使用jQuery庫的JavaScript之前（即$ -char） – Alex 2013-04-26 15:52:02

@Claire將它放在頁面的「head」部分，或者在HTML中的''標記之前，然後調用Javascript運行你的旋轉木馬。 – 2013-04-26 15:52:14

您可以嘗試包括jQuery庫，以及：

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

包括滑塊腳本之前，你可以在你的情況下，在頭部添加

來源

2013-04-26 15:48:27 AlexC

Jquery的圖像滑塊行爲不

回答

相關問題