Javascript 我制作了一个jquery幻灯片，但它没有'；如果我不能正常工作，我该怎么办_Javascript_Jquery_Html_Css

Javascript 我制作了一个jquery幻灯片，但它没有'；如果我不能正常工作，我该怎么办

javascript jquery html css

Javascript 我制作了一个jquery幻灯片，但它没有'；如果我不能正常工作，我该怎么办,javascript,jquery,html,css,Javascript,Jquery,Html,Css,好吧，我从youtube上的一个视频系列中制作了这个jquery滑块，但它似乎工作不正常。。。图像最初会淡入，但随后下一个图像不会进入。我怎样才能解决这个问题。。由于不推荐使用的函数，我正在使用较旧版本的jquery 这是html <!DOCTYPE html> <html> <head> <title> Home </title> <link rel

好吧，我从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>

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);
    }

还有图像压缩

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

在javascript文件中，变量

count

的数据类型为int，这就是选择器找不到指向的DOM的原因。
您应该像

count.toString（）

那样编写代码

您可以按Id选择dom，因此不需要像这样编码：

$（“slider”+count）

，而

$（“#”+count.toString（））

是正确的方法

在html中，image3的名称不正确，应为slider3.jpg

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

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

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

将

$（“滑块”）

更改为

$（.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

也许拼写检查器-“去擦亮”？“$（“#”+count.toString（））是正确的方法“不必使用长格式的

count.toString（）

（即使它有效）由于javascript中的字符串连接规则：

count

如果附加到字符串，将转换为字符串。这个答案仍然包含错误“count==1”，这将不允许滑块前进/循环回到起点。

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