2016-06-12 100 views
0

我在拼湊我的jQuery圖像滑塊時遇到了麻煩。我不知道它有什麼問題。我使用responsiveslides.jshttp://responsiveslides.com/)`爲什麼我的jQuery圖像滑塊不起作用?

/* RESET */ 
 

 
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { 
 
    /* Cancel out some differences between browser defaults */ 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 

 
* { 
 
    /* Padding and borders will be subtracted from the content box width, not added to it. */ 
 
    box-sizing: border-box; 
 
} 
 

 
article, aside, audio, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { 
 
    /* Make sure the browser knows how to display HTML5 elements */ 
 
    display: block; 
 
} 
 

 
header img{ 
 
    display: block; 
 
    width: 30em; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding-top: 2em; 
 
    padding-bottom: 1em; 
 
} 
 
#wrap{ 
 
    background-image: url(Images\seamless-old-style-wallpaper-Download-Royalty-free-Vector-File-EPS-37757.jpg); 
 
    background-repeat: repeat; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px; 
 
} 
 
nav { 
 
    width: 40em; 
 
    height: 3em; 
 
    background: light grey; 
 
    padding-top: 1em; 
 
    border-top: 1px solid #ccc; 
 
    border-bottom: 1px solid #ccc; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    color: white; 
 
    } 
 

 
nav ul { 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav ul li { 
 
    list-style: none; 
 
    float: left; 
 
    text-align: center; 
 
    color: white; 
 
    width: calc(40em/6); 
 

 
} 
 

 

 

 
nav ul li a, nav ul li a :visited { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #white; 
 
} 
 

 
nav ul li a: hover { 
 
    color: brown; 
 
} 
 
li a { text-decoration: none; color:#fff; } 
 
li a:visited { text-decoration: none; color:#fff; } 
 
li a:hover { text-decoration: none; color:#512e15; } 
 
li a:focus { text-decoration: none; color:#fff; } 
 
li a:hover, li a:active { text-decoration: none; color:#512e15; } 
 

 
footer{ 
 
    display: flex; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    width: 40em; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 3em; 
 
    background-color: light grey; 
 
    padding-top: 1em; 
 
    border-top: 1px solid #ccc; 
 
    border-bottom: 1px solid #ccc; 
 
    left:0; 
 
    right:0; 
 
    clear: left; 
 
} 
 

 
p, address, #phone, #email{ 
 
    color: white; 
 
    padding-left: 1em; 
 
    padding-right: 1em; 
 
    font-size: .75em; 
 
} 
 
footer img{ 
 
    height:1em; 
 
    width: 2em; 
 
    padding-left: 1em; 
 

 

 
} 
 
body{ 
 
    display: flex; 
 
} 
 

 
#leftSide{ 
 
    float:left; 
 
    width: 32em; 
 
    height: 16.5em; 
 
    font-size: 1.5em; 
 
    margin-left: 7em; 
 
    margin-right:7em; 
 
    margin-top: 1em; 
 
    margin-bottom: 1.5em; 
 
    overflow-y: scroll; 
 
} 
 
aside{ 
 
    display: inline-flex; 
 
    color: white; 
 
    font-size: 2em; 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
#title h1{ 
 
    color: white; 
 
margin-top: .25em; 
 
margin-bottom: .25em 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    font-size: 5em; 
 
    text-align: center; 
 

 
} 
 
iframe{ 
 
    margin-top: 3em; 
 
} 
 

 
.rslides { 
 
    position: relative; 
 
    list-style: none; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    } 
 

 
.rslides li { 
 
    -webkit-backface-visibility: hidden; 
 
    position: absolute; 
 
    display: none; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    } 
 

 
.rslides li:first-child { 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
    } 
 

 
.rslides img { 
 
    display: block; 
 
    height: auto; 
 
    float: left; 
 
    width: 100%; 
 
    border: 0; 
 
    }
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t <title>Great Art</title> 
 
\t <link rel="stylesheet" href="stylesheet.css"> 
 
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
\t <script src="responsiveslides.min.js"></script> 
 

 
</head> 
 

 
\t <body background="Images\flock_wallpaper_pattern_by_hydrogen666.jpg"> 
 
\t <div id= wrap> 
 
\t \t <header> 
 
\t \t \t <img src = "Images\Great Art logo 2.jpg" alt="Great Art Logo"> </img> 
 
\t \t </header> 
 
\t \t <nav> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="index.html">home</a></li> 
 
\t \t \t \t <li><a href="Gallery.html">gallery</a></li> 
 
\t \t \t \t <li><a href="artist biography.html">artist biography</a></li> 
 
\t \t \t \t <li><a href="blog.html">blog page</a></li> 
 
\t \t \t \t <li><a href="about us.html">About us</a></li> 
 
\t \t \t \t <li><a href="contact us.html">contact us</a></li> 
 
\t \t \t </ul> 
 
\t \t </nav> 
 
\t \t <div id= main> 
 
\t \t \t <ul class="rslides"> 
 
    <li><img src="1.jpg" alt=""></li> 
 
    <li><img src="2.jpg" alt=""></li> 
 
    <li><img src="3.jpg" alt=""></li> 
 
</ul> 
 
<script> 
 
    $(function() { 
 
    $(".rslides").responsiveSlides(); 
 
    }); 
 
</script> 
 
\t \t </div> 
 
\t \t <footer> 
 
\t \t \t <p> Great Art </p> 
 
\t \t \t <address> PO Box 12-345 Christchurch </address> 
 
\t \t \t <p id =phone> Phone: 03 345 6789 </p> 
 
\t \t \t <p id= email> Email: [email protected] </p> 
 
\t \t \t <img src= "Images\fb-art.jpg"</img> 
 
\t \t \t <img src= "Images\twitter logo.png"</img> 
 
\t \t </footer> 
 
\t </div> 
 

 
</body> 
 
</html>

我已插入的.js到包含文件夾,我想不出爲什麼它不會運行。

+0

嘗試在頭中添加該腳本

+0

仍然不移動,只是保持爲一個固體圖像 –

+0

滑塊正在工作..但試圖放置滑塊的位置..因爲它目前在頁腳中使用,你需要向下滾動才能看到滑塊..創建codepen網址供參考 - http://codepen.io/pen/ –

回答

0

你應該在引號中使用hte id,並且在關閉代碼塊之前,您沒有關閉容納它的div。你應該將腳本塊出來的股利,並在頁面的底部,然後你將關閉DIVB,它應該work.-應該是:

 <div id= "main"> 
     <ul class="rslides"> 
      <li><img src="1.jpg" alt=""></li> 
      <li><img src="2.jpg" alt=""></li> 
      <li><img src="3.jpg" alt=""></li> 
     </ul> 
    </div> 
//other code 
<script>//code//</script> 

你也被錯誤地關閉您的img標籤 - 和使用落後的削減時htey應爲正斜槓:它應該是

<img src= "Images/fb-art.jpg" alt="facebook logo"/> 
    <img src= "Images/twitter logo.png" alt="twitter logo"/> 
+0

修正了所有這些,謝謝。但它仍然無法工作。 :( –

+0

它看起來好像你有圍繞所有頁面元素的div包裝 - 這可能會給你應用的背景圖片帶來一個問題。嘗試從包裝中移除滑塊div,看看它是否工作 – gavgrif

0
  1. 我在官方JS測試(我建議u到替換它在你的HTML頭太)
<!-- //official jquery --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<!-- //official responsiveslides --> 
<script src="http://responsiveslides.com/responsiveslides.min.js?v=1.6"></script> 
  • 移動主slidshow腳本觸發它(我添加自動啓動,MB那爲什麼在你的代碼的幻燈片將不能啓動X),無分頁,無導航)

    $(函數(){
    $(".rslides").responsiveSlides({ 
        auto: true, 
        pagination: false, 
        nav: false, 
        fade: 500 
        }); 
    
    });