Question

jsFiddle

我正在尝试水平输出图像和文字。文本元素使用jQuery Cycle Lite Plugin来循环单词列表。正如你在上面的jsFiddle中看到的那样，循环文本元素在页面上，但由于某种原因，元素的定位搞砸了。一些文本元素出现在图像中/上，然后在最后有一堆堆叠在一起。造成这种情况的原因是什么？

我知道有一些插件，比如jQuery Masonry，可能能够自动定位元素，但我需要保持HTML输出所有元素的顺序。我真正需要的是让文字元素穿插在图片中，这样它们都是可见的，而不是乱七八糟地出现在彼此之间。

感谢阅读。

编辑：

HTML

<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js" type="text/javascript"></script>

            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="a"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="b"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="c"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="d"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="e"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="f"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="g"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="h"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="i"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="j"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>

使用Javascript：

$(document).ready(function() {
    $('#a').cycle();
    $('#b').cycle();
    $('#c').cycle();
    $('#d').cycle();
    $('#e').cycle();
    $('#f').cycle();
    $('#g').cycle();
    $('#h').cycle();
    $('#i').cycle();
    $('#j').cycle(); 
});

编辑2：

这是一张代表我正在尝试做的事情的图片。蓝色框是图像，红色框表示我希望循环文本出现的区域。

alt text

Answer 1

好的，在您编辑之后，这是一个完全符合您要求的版本： ~~jsfiddle.net/PcD8n~~ jsfiddle.net/AcPxx

我冒昧地使用你的图像，因为他们使代码变得笨拙。另外，为简明起见，我删除了包装器<a>标签。如果您愿意，可以将它们添加回去。

最后，我从循环器中删除了id，因为在你给我们的代码的上下文中没有必要。

Answer 2

我怀疑使用<span>（内联元素）是布局问题的一部分，因为演示使用了<div>，这是一个块级元素。

进一步调查显示，您的span[id]元素没有指定高度（因为它们是内联的），因此隐含高度为0px。因此奇怪的堆叠。

Answer 3

我不太明白你要做什么 +你在jsFiddle上的例子有点破碎这是一个更简化（我希望）的标记版本http://jsfiddle.net/avipinto/F95x3/2/
我在图像之间放置了跨度，以显示图像之间的过渡，因为您向所有图像提供了相同的图像。

如果您的所有问题都是放置幻灯片放映下方的文本，那么请为容器提供图像高度如果你想为每个图像添加不同的标题 - 查看插件页面的来源 - 他使用以下代码：

 $('#slideshow3').cycle({
        delay: 2000,
        speed: 500,
        before: onBefore
    });

    function onBefore() {
        $('#title').html(this.alt);
    }

和html：

<div id="slideshow3" class="pics">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="Panama City" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" alt="Heading to the water" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="Danny" />
</div>

比在整个地方随地吐痰更优雅，更方便

希望这有帮助

使用图片和文字时奇怪的定位行为

3 个答案: