Javascript Jquery移动幻灯片_Javascript_Jquery_Html_Css

Javascript Jquery移动幻灯片

javascript jquery html css

Javascript Jquery移动幻灯片,javascript,jquery,html,css,Javascript,Jquery,Html,Css,有人能帮我看一下图片幻灯片吗？现在这些图片完全贴在了网页上。我完全迷路了！Tks！我将粘贴她的html、js和css（3部分）。由于细节不够详细，我无法发布此帖子。我在这里写的只是一些额外的测试，希望它是可以理解的 HTML <!DOCTYPE html> <html> <head> <title>Panda</title> <meta name="viewport" co

有人能帮我看一下图片幻灯片吗？现在这些图片完全贴在了网页上。我完全迷路了！Tks！我将粘贴她的html、js和css（3部分）。由于细节不够详细，我无法发布此帖子。我在这里写的只是一些额外的测试，希望它是可以理解的

HTML

<!DOCTYPE html>
    <html>
        <head>
        <title>Panda</title>

        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="jquery.mobile-1.4.0.min.css"/>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />

        <link rel="stylesheet" href="gallerytest.css"/>


        <link rel="stylesheet" href="gallerytest.css"/>
        <script src="jquery-2.0.3.min.js"></script>
        <script src="jquery.mobile-1.4.0.min.js"></script>

        <script src="jquery-ui-1.10.4"></script>
        <script src="slide.js"></script>
    </head>
    <body onload="Slider();"> 
        <div data-role="page" id="Home" data-theme="a">
            <div data-role="header" >
                <div data-role="navbar">
                <ul id="header">
                        <li><a href="home.html"><img src="images/home-black.png"/>&nbsp Home</a></li>
                        <li><a href="donate.html">Donate</a></li>
                        <li><a href="about.html"><img src="images/info-black.png"/>&nbsp About</a></li>
                    </ul>
                </div>
            </div>  
        <div role="main" class="ui-content">
                <h1 style="text-align:center">Gallery</h1>
            </div>
        </div>
        <div data-role="content" >  
        <div class="slider">
                <img id="1" src="images/full/001.jpg" border ="0" alt="Image001" />
                <img id="2" src="images/full/002.jpg" border ="0" alt="Image002" />
                <img id="3" src="images/full/003.jpg" border ="0" alt="Image003" />
                <img id="4" src="images/full/004.jpg" border ="0" alt="Image004" />
                <img id="5" src="images/full/005.jpg" border ="0" alt="Image005" /> 
                <img id="6" src="images/full/006.jpg" border ="0" alt="Image006" />
                <img id="7" src="images/full/007.jpg" border ="0" alt="Image007" />
                <img id="8" src="images/full/008.jpg" border ="0" alt="Image008" />
                <img id="9" src="images/full/009.jpg" border ="0" alt="Image009" />
            </div>
        </div>
        <div data-role="footer">
            <div data-role="navbar">
            <ul id="footer">
                    <li><a href="card.html">Send me a Card!</a></li>
                    <li><a href="donate.html">Donate</a></li>
                    <li><a href="contact.html">Contact me</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

.slider{
    width:600px;
    height:600px;
    overflow:hidden;
    margin:0;
    background-image:url('images/ajax-loader.gif');
    background-repeat:no-repeat;
    background-position:center;
    background:red;
}

$(document).on("pageinit", function() {
    $(".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);
});

好的，所以这里有一些问题，但是我想我把它们都搞定了，让我们看看。第一件事。身体中的onload（

）和pageinit函数（

$（document）。在（“pageinit”，函数Slider（）{…}）；

）上，正在尝试执行相同的操作。但是，body onload对于您要执行的操作是不正确的，所以请将其删除（

）

接下来，jQuery正在查看的div类是“slider（）；”，但应该是“slider”。首先，您并没有试图在那里进行方法调用。即使是这样，这也是不正确的，因为jQuery无论如何都会处理这个问题。另外，jQuery正在查找

.slider

，而不是

.slider（）

（这可能吗？），所以将其更改为

，这样就可以解决问题了

接下来，在jQuery“on”方法中提供函数名的唯一原因是如果它是在外部定义的，在这种情况下，您不必声明它，因为您将在函数外部声明它，因此声明

$（document）.on（“pageinit”，function Slider（）{…}）

实际上破坏了它，因此将其更改为

$（document）.on（“pageinit”，function（）{…}）将处理该问题
这修复了逻辑中的所有错误。接下来，还有一些语法错误也让你感到悲伤。即，下面的代码块
$(".slider#1" + count).show("fade", 500);
$(".slider#1" + count).delay(5500).hide("slide", {direction:"left"},500);

$(".slider#+count).show("slide",{direction:'right'},500};
$(".slider#+count).delay(5500).hide("slide"{direction:"left"},500);

让我们先看看第一个街区
按照设置的方式，jQuery使用类滑块
和ID1（计数）
（例如，如果count=2
，它将搜索ID为12）在DOM中查找项。您试图让它做的是显示slider元素的第一个子元素。这意味着选择器应该是$（“.slider.1”）
。这将找到.slider
元素，然后在其直接子元素中搜索#1

第二组股票发行相同，但报价不正确更为困难。您需要的是$（“.slider”#“+count）
。最后，您需要使用括号而不是括号（$（“.slider#+count”）.show（“slide”，{direction:'right'}，500）；
），在第二行，您忘记了逗号（$（“.slider#+count”）.show（“slide”，{direction:'right'}，500}；
）
最后，由于jQuery正在切换所有图像，因此您需要在开始时使用display:none；
CSS属性隐藏所有图像
此时，如果jQuery mobile stuff配置正确（不幸的是，Fiddle不允许我使用mobile stuff），您现在应该有一个工作幻灯片了！希望这有助于您解决问题，而且信息量也足够大，您知道如何在将来做到这一点！祝您好运，编码愉快！
这真是一团糟。我制作了一个小提琴，它在几个方面有所不同。它不在移动设备上（但很容易应用到移动设备上），我使用淡入淡出而不是幻灯片（不想学习如何制作jQuery幻灯片）。如果我的工作方向不对，请告诉我。看看这把小提琴，看看它是否有帮助：抱歉，只是去掉了背景色红色。我做了一个测试，检查css是否有任何效果。我没有你的图像可供使用，所以我只使用我自己的图像进行演示。你所要做的就是将图像的URL更改为你自己的，并添加为人我故意让代码非常开放，以便您可以根据需要进行更改。fiddle仅用于演示，而不是作为复制粘贴解决方案。我不确定我的编辑是否/何时会在StackOverflow上形成，但我已从您提供的代码中删除了许多不必要的内容和损坏的内容。-RobStemen.Tks感谢您的努力。顺便说一句，你需要把这个syntex放在你的js$（文档）前面吗{我刚试过，仍然不工作。我也意识到了那些图片。对不起。谢谢你的努力。我会一点一点地学习。不幸的是，我试图通过Chrome运行它。我得到的错误代码是无法加载资源：net:：ERR_FILE_NOT_FOUND。它与jquery mobile-ui-1.0.4有关。我将尝试找出它的错误。错误代码是：问题是我没有找到jquery ui 1.0.4 css下载版本。我只能放那个链接。但不管怎样，你做得很好。很多TK！没问题！我们都有过，当你陷入困境时，有人能帮助你是有帮助的。如果它能帮你解决问题，那么花时间和精力是值得的。为了回答你的最后一个问题，我选择了ajax加载器离开后，图片仍然没有显示。它显示了9个图标。出现问题。这里没有地方发送zip文件。但我将尝试解决它。Tks！我的回答中忘记提到这一点（现在将更新它），但在CSS中，您应该将display:none；
添加到您的图像中。因为jQuery正在显示/隐藏它们，所以您希望它们都开始隐藏：-）我想我将来也会投您的票。Tks！