Question

我在整理jQuery图片滑块时遇到了麻烦。我不知道它有什么问题。我使用responsiveslides.js（http://responsiveslides.com/）`

＆＃13;

/* 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;
  }

＆＃13;

<!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>
			<img src= "Images\twitter logo.png"</img>
		</footer>
	</div>

</body>
</html>

＆＃13;

我已将.js插入到包含文件夹中，我无法想到为什么它不会运行。

Answer 1

你应该在引号中使用hte id，并且在脚本块之后你不会关闭它所包含的div。你应该将脚本块从div移到页面底部，然后你将关闭divb它应该工作。它应该是：

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

你也正在错误地关闭你的img标签 - 并且当htey应该用于正斜杠时使用向后斜线：它应该是

{{1}}

Answer 2

我在官方js上测试过（我建议你在你的html头中替换它）

alpha1 --> beta1,beta2
alpha2 --> beta2
alpha3 --> beta3,beta1

移动主slidshow脚本触发它（我添加自动启动器，mb为什么在你的代码幻灯片显示赢得不开始X），没有分页，没有导航）

$（function（）{

<!-- //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>

为什么我的jQuery图像滑块不起作用？

2 个答案: