0
我在拼湊我的jQuery圖像滑塊時遇到了麻煩。我不知道它有什麼問題。我使用responsiveslides.js（http://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到包含文件夾，我想不出爲什麼它不會運行。
嘗試在頭中添加該腳本 –
仍然不移動，只是保持爲一個固體圖像 –
滑塊正在工作..但試圖放置滑塊的位置..因爲它目前在頁腳中使用，你需要向下滾動才能看到滑塊..創建codepen網址供參考 - http://codepen.io/pen/ –