我创建了一个jQuery幻灯片，但它不断重复相同的图像

时间：2015-03-29 19:41:40

标签： javascript jquery html css

正如您在下面提供的代码中看到的，我创建了一个自动运行的简单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&gt;&gt;</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&gt;&gt;</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

3 个答案:

答案 0 :(得分：0)

如何将下一张幻灯片作为参数传递给该函数？ 

    function Slider(i){
        $(".slider #"+i).show("fade", 500);
        $(".slider #"+i).delay(5500).hide("slide", {direction:'left'}, 500);
        var sc = 3;
        var netxslide=i+1;
        if (nextslide==sc+1){nextslide=1}

        setInterval(function(){Slider(nextslide)},6500);
    }

答案 1 :(得分：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）启用它）

答案 2 :(得分：-1)

   if(count == sc){
        count == 1;
    }else{
        count = count + 1;
    }

你的第一次计数== 1;应该是count = 1;

您没有设置变量，只计算TRUE。

替换为：

   if(count == sc){
        count = 1;
    }else{
        count++;
    }
相关问题
最新问题