我做了一个jquery幻灯片，但没有;我工作不好，我该怎么办

I made a jquery slide show but it doesn't work right, what do i do

本文关键字：工作我该怎么办幻灯片一个 jquery 更新时间：2023-09-26

好吧，所以我在youtube上的一个视频系列中制作了这个jquery滑块，但它似乎工作不正常。。。图像一开始会淡入，但下一个图像没有出现。我该如何解决这个问题。。由于不推荐使用函数，我正在使用旧版本的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>
    </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 = $(".slider img").size();
        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

问题是语法错误，类选择器应该包含一个点

将$("slider")更改为$(".slider")

试试这个

function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
    console.log(count);
    $(".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);
  }

并用替换您的滑动容器

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

并确保将您的图像slider3.jpg重命名为slide3.jpg

好吧，以下问题使它无法工作，您可以尝试一下：

在javascript文件中，变量count的数据类型为int，这就是选择器找不到指向的DOM的原因。
您应该像count.toString()那样进行编码。
您通过Id选择dom，因此不需要像$("slider #"+count)这样编码，$("#"+ count.toString())是正确的方式。
在html中，image3的名称不正确，应该是slider3.jpg。

我认为这将帮助您解决图像2和3未显示的问题。

你需要考虑的另一件事是，如何向后滑动。