Question

好吧，在这个项目之前，我对jQuery一无所知。我基本上什么都不知道，但仍然。

无论如何，最终目标是创建一个滑块库。这个画廊应无限运行，不会跳过或撕裂。感谢我已经问过你们的许多问题，（感谢顺便提供的帮助。）我已经到了这一点......

但我不知道如何让动画重演。我做了一些研究，并想也许我可以使用.before属性拍摄最后一张图片并将其拍到另一张图片后面。也许就像......

$(document).ready(function() {  
$("#image").animate({"margin-left":"+=400px"}, 3000, "linear");
function gallery () {
    $("#image").animate({"margin-left":"+=400px"}, 3000, "linear");
            $("image3").before( $("image") );
}
setInterval(gallery, 3000);
});

但是，我有两个问题。冷杉是那个代码绝对没有什么。第二个是我不确定我会如何计时。也许有办法检查它是否已离开框架？

先谢谢！

Answer 1

您的方法有几个问题需要解决。也就是说，您需要解决使用更好的选择器的问题;将代码正确包装以进行调用的问题;你需要管理你的形象。

使用更好的选择器

jQuery选择几乎基于 css选择器。

ID选择

在css中，如果要使用id="hello"设置元素样式，则可以使用#id{ color: blue; }。在jQuery中，如果要使用id="hello"定位元素，则可以使用$("#hello")。看到相关性？请注意，您应该只使用唯一的ID 。

课程选择

如果要定位多个元素，请使用类。在css中，如果您想要使用class="world"选择所有元素，那么您将使用.world{ background-color:yellow; }。在jQuery中，如果您想使用class="world"定位所有元素，那么您将使用$('.world')。再次注意相关性。

复杂选择

您可以选择更复杂的选择器。对于您的确切情况，我建议使用img[class^=image]并完全摆脱ID。该选择器说“选择所有具有以图像开头的类的图像元素”。如果您想将此选择器用于css，则可以使用img[class^=image]{ position: relative; }。如果您想将此选择器用于jQuery，则可以使用$('img[class^=image]').animate({});。抱歉重复，但再次..相关性：P

包装您的代码

命名惯例

你想做什么？你可以用几句话说出来，如果是这样的话，用这个名字做一个函数。

function slideGallery(){}

定义您的目标

然后浏览您的函数并定义您希望处理的过程。如果你真的想要完成你问题中定义的目标，那么你需要考虑一些非常重要的方面。

function slideGallery()
{
 //will animation cause an image to leave the screen? (hint: think collision detection)
 //if so, clone image leaving screen and place it at the start (hint: $(element).clone())
 //animate all images
 //remove image which left screen (hint: $(element).remove())
}

您的形象在哪里？

跟踪你的形象绝非易事。

视

首先，你必须要特别注意文档的大小，但是视口的大小是多少。如果你考虑滚动条，这可能会变得有点困难。但是，由于您可以随意将图像从屏幕上推出，这不是问题。你真正需要的是询问jQuery窗口宽度是什么。

var windowWidth = $(window).width();

图片位置

接下来，您需要跟踪图像的动画效果。这可以通过jQuery的偏移来完成。

//target current image animating
var currentImage = however you decide to access the image
var currentImageOffset = $(currentImage).offset().left;
if( currentImageOffset + animationWidth > windowWidth ) //collision will occur

图片展示位置

现在您需要做的是跟踪第一张图片的开始位置，这样当您克隆所有图片时，您可以将其放置在那里。这意味着在所有内容开始制作动画之前收集第一批图像数据。

var baseImagePosition = $('.image').offset().left;

将所有这些东西放在一起应该会给你一个滚动画廊。

我对如何循环这个感到茫然？

1 个答案: