我在组合 jQuery 图像 slider 时遇到问题。我不知道它有什么问题。我正在使用 responsiveslides.js ( http://responsiveslides.com/ )`
/* 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>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Great Art</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
</head>
<body background="Images\flock_wallpaper_pattern_by_hydrogen666.jpg">
<div id=wrap>
<header>
<img src="Images\Great Art logo 2.jpg" alt="Great Art Logo"> </img>
</header>
<nav>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="Gallery.html">gallery</a></li>
<li><a href="artist biography.html">artist biography</a></li>
<li><a href="blog.html">blog page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="contact us.html">contact us</a></li>
</ul>
</nav>
<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>
<script>
$(function () {
$(".rslides").responsiveSlides();
});
</script>
</div>
<footer>
<p> Great Art </p>
<address> PO Box 12-345 Christchurch </address>
<p id=phone> Phone: 03 345 6789 </p>
<p id=email> Email: hubert@great-art.org.nz </p>
<img src="Images\fb-art.jpg"> <img src="Images\twitter logo.png">
</footer>
</div>
</body>
</html>我已经将 .js 插入到包含的文件夹中，我想不出为什么它不会运行。
最佳答案
您应该将 hte id 放在引号中，并且在 scrip block 之后才关闭容纳它的 div。你应该将脚本 block 移出 div 并移到页面底部，然后你将关闭 divb，它应该可以工作。- 它应该是:
<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"/>
关于javascript - 我如何使用 JQuery 图像 slider ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37770513/