如您在下面提供的代码中所见，我创建了一个自动运行的简单 jQuery 幻灯片。但是我遇到了一个我似乎无法弄清楚的小问题。当幻灯片放映时，它运行得很完美，但是一旦它到达最后一张图片，它就会不断重复!我怎样才能防止这种情况发生？代码在下面，还有一个图像链接。谢谢!:) P.S-我正在使用旧的 jQuery 版本，因为函数已弃用!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.18.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body class="body" onload="Slider()">
<div class="container">
<div class="bg">
<div class="mainHeader">
<nav>
<ul>
<li class="last"><a href="#">Contact</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#" class="active">Home</a></li>
</ul>
</nav>
</div>
<div class="topArea">
<div class="topAInfo">
<h2>Here is just a simple title</h2>
<p>This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.</p>
</div>
</div>
<div class="middleArea">
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
<div class="middleAInfo">
<h3>Welcome to</h3>
<p>A dummy website!!</p>
</div>
<div class="latestNews">
<hr>
<h2>Latest News</h2>
<div class="post">
<p class="date">March 28, 2015</p>
<p>New advanced update with double speed and a whole bunch of cool new st.. <a href="#">more>></a></p>
</div>
<div class="post">
<p class="date">March 28, 2015</p>
<p>New advanced update with double speed and a whole bunch of cool new st.. <a href="#">more>></a></p>
</div>
<div class="newsLetter">
<div class="newsLInfo">
<h3>Newsletter sign-up</h3>
<hr>
<p>If you would like to sign up for our free NewsLetter please enter your email below</p>
<a href="#">Unsubscribe</a>
</div>
<input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
<div class="button1">Submit</div>
</div>
</div>
</div>
</div>
</div>
<!--https://www.freelancer.com/jobs/php/PSD-HTML-page-only-page/-->
</body>
</html>
CSS:
*{margin:0;padding:0;}
@font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body{
background:#ebebeb;
width:80%;
height:1300px;
}
.container{
width:100%;
}
.mainHeader nav{
width:95%;
height:40px;
position:relative;
left:30px;
top:60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{
}
.mainHeader nav ul li{
float:right;
display:inline;
text-align:center;
border:1px solid #ADADA8;
border-bottom:none;
border-top:none;
border-left:none;
padding-top:20px;
}
.mainHeader nav ul li.last{
border-right:none;
}
.mainHeader nav ul li a{
text-decoration:none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family:Arial;
position:relative;
top:-10px;
color:white;
padding:10px;
padding-right:20px;
padding-left:20px;
}
.mainHeader nav ul li a.active{
background:white;
color:black;
}
.mainHeader nav ul li a:hover{
background:white;
color:black;
}
.topArea{
width:95%;
height:300px;
position:relative;
left:30px;
top:10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
margin:20px;
padding-top:60px;
width:60%;
margin:50px;
font-family:;
}
.topArea .topAInfo h2{
font-family:SketchFont;
font-weight: normal;
}
.topArea .topAInfo p{
line-height:25px;
font-family:cursive;
font-size:15px;
}
.bg{
width:100%;
height:1200px;
position:relative;
left:10%;
background:linear-gradient(blue, white, white, blue); /* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea{
background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
height:600px;
width:95%;
position:relative;
left:30px;
top:10px;
}
.middleArea .middleAInfo {
padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
color:#49CBF0;
font-size:30px;
font-weight:400;
}
.middleArea .latestNews {
width:250px;
height:300px;
background:#0099cc;
float:right;
position:relative;
top:-60px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
position:relative;
top:50px;
color:black;
width:90%;
margin-left:10px;
}
.middleArea .latestNews h2{
padding:10px 10px 10px 10px;
color:white;
}
.middleArea .latestNews p.date{
color:white;
font-size:13px;
font-weight:bold;
padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
color:white;
font-size:13px;
position:relative;
left:10px;
width:225px;
}
.middleArea .latestNews a{
color:blue;
font-size:15px;
font-family:Arial;
}
.middleArea .latestNews .newsLetter{
background:white;
width:250px;
height:200px;
position:relative;
top:80px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
position:relative;
top:40px;
left:25px;
}
.middleArea .latestNews .newsLetter .button1{
width:50px;
height:25px;
background:#1768ED;
padding:3px 10px 2px 10px;
border-radius:7px;
text-align:center;
color:white;
font-family:Arial;
position:relative;
top:45px;
left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
position:relative;
top:15px;
left:10px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
position:relative;
top:20px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
color:black;
position:relative;
top:40px;
color:#21AFEA;
font-size:15px;
}
.middleArea .latestNews .newsLetter a{
position:relative;
top:90px;
left:30px;
}
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;
background-size: 100px 100px;
}
.slider img{
display:none;
}
Javascript:
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = 3;
var count = 2;
setInterval(function(){
$(".slider #"+count).show("slide", {direction:'right'}, 500);
$(".slider #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
图像: https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0
最佳答案
你好，你的错误是在 if 语句中。
if(count == sc){
count == 1;
}else{
count = count + 1;
}
你写的
count == 1;
代替
count = 1;
常见错误，自己犯了很多。难以追踪。
你的脚本应该是这样的:
function Slider(){
$(".slider #1").show("fade", 100);
$(".slider #1").delay(1000).hide("slide", {direction:'left'}, 100);
sc = 3;
count = 2;
setInterval(function(){
$(".slider #"+count).show("slide", {direction:'right'}, 100);
$(".slider #"+count).delay(1000).hide("slide", {direction:'left'}, 100);
if(count == sc){
count = 1;
}else{
count++;
}
}, 1000);
}
你应该开始使用你的控制台(几乎所有现代浏览器都有一个，按 F12 启用它(FireFox/Chrome))
关于javascript - 我创建了一个 jQuery 幻灯片，但它不断重复相同的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29333906/