Question

有人可以帮助获取图片幻灯片吗？现在图像只是完全粘贴在网页上。完全迷路了！ TKS！我会粘贴她的html，js和css（3parts）。由于细节较少，我无法发布这篇文章。我在这里写了一些额外的测试，希望这是可以理解的。

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>

CSS

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

JS

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

Answer 1

好的，所以这有一些问题，但我想我已经把它们全部搞定了，所以让我们一起来看看。

首先要做的事情。您身体中的onload（<body onload="Slider();">）和pageinit函数（$(document).on("pageinit", function Slider() {...});）正在尝试执行相同的操作。然而，身体负载对于你正在尝试做的事情是不正确的，所以要摆脱它（<body>）。

接下来，您的jQuery正在查看的div类是“slider（）;”，但应该只是“slider”。对于初学者来说，你不是试图在那里进行方法调用。即使你是，那也不正确，因为jQuery无论如何都会处理它。此外，您的jQuery正在寻找.slider，而不是.slider();（甚至可能吗？），因此请将其更改为<div class="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正在你的DOM中寻找一个项目slider和ID 1(count)（例如，如果count = 2，它将是搜索ID为12）。你试图让它做的是显示滑块元素的第一个子元素。这意味着选择器应为$(".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移动设备配置正确（不幸的是，Fiddle没有让我使用移动设备），你现在应该有一个有效的幻灯片！希望这有助于您解决问题，并且还提供足够的信息，以便您知道将来如何做到这一点！祝你好运，编码愉快！

Jquery移动幻灯片

1 个答案: