0

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

无论如何，最终目标是创建一个滑块库。这个画廊应该无限运行，没有跳过或流泪。感谢我已经问过你们的许多问题，（顺便感谢您的帮助。）我已经明白了......

http://jsfiddle.net/75MDR/

但我不知道如何让动画重演。我做了一些研究，并认为也许我可以使用 .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);
});

但是，我有两个问题。第一个是该代码完全没有任何作用第二个是我不确定我将如何计时。也许有办法检查它是否已经离开框架？

先谢谢了！

4

1 回答 1

1

您的方法有几个问题需要解决。也就是说，您需要解决使用更好的选择器的问题；正确包装代码以进行调用的问题；你需要管理你的图像在哪里。

使用更好的选择器

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

身份选择

在 css 中，如果你想为元素设置样式，id="hello"那么你会使用#id{ color: blue; }. 在 jQuery 中，如果你想定位一个元素，id="hello"那么你会使用$("#hello"). 看到相关性了吗？请记住，您应该只使用唯一的 ids。

班级选择

如果要定位多个元素，请使用类。在 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;

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

于 2013-07-10T02:05:38.710 回答