如何将图片菜单滑动为选框

时间:2014-01-30 08:38:41

标签: javascript html css menu marquee

我想在songspk.name中看到从右到左移动一些图像。如果您访问,您可以看到有一组图片(6个)从右向左移动,您可以将它们称为选框。但我的问题是图片之间没有任何差距!如果我使用选框来拍摄一些照片,直到最后一张照片未完成,第一张照片就不再显示了。最后一张和第一张照片之间有很长的间隙。我的网站可以在masti2k14.tk

看到

我使用了以下简单的html字幕代码。请检查它在我的网站上的工作情况(masti2k14)。

<marquee behavior="scroll" direction="left" onmouseover="this.stop()" onmouseout="this.start()" >
<img src="/img/600195/600195910_9d9763a3a4.jpg" width="100" height="100" alt="Natural"/>
<a href="site_94.xhtml"><img src="/img/600195/600195909_3514f40fb9.jpg" width="100" height="100" alt="Grand Masti Songs"/></a>
<a href="site_39.xhtml"><img src="/img/600195/600195908_23b3ada634.jpg" width="100" height="100" alt="Dhoom : 3 Songs"/></a>
<a href="site_63.xhtml"><img src="/img/600195/600195907_3f035091f2.jpg" width="100" height="100" alt="Chennai Express Songs"/></a>
<a href="site_11.xhtml"><img src="/img/600195/600195906_2a818232d5.jpg" width="100" height="100" alt="Aashiqui 2 Songs"/></a>
</marquee>

我希望图片或图片不应该结束。上一张和第一张图片/图片之间存在很长的差距。

2 个答案:

答案 0 :(得分:1)

你可以使用jQuery和Marquee插件。

http://www.jqueryscript.net/animation/jQuery-Endless-Div-Scroll-Plugin.html

顺便说一下。 不推荐使用<marquee>标记。

修改

如果你不想使用像jQuery这样的任何脚本,请查看Chris Coyier的这个小提琴。

Fiddle

答案 1 :(得分:0)

试试这个。我根本没有测试过它。它可能工作或不工作。我知道你说你不能做javascript,但是marquee标签很老了。没有人再使用它了。

<div class="container">
    <img src="/img/600195/600195910_9d9763a3a4.jpg" width="100" height="100" alt="Natural"/>
    <a href="site_94.xhtml"><img src="/img/600195/600195909_3514f40fb9.jpg" width="100" height="100" alt="Grand Masti Songs"/></a>
    <a href="site_39.xhtml"><img src="/img/600195/600195908_23b3ada634.jpg" width="100" height="100" alt="Dhoom : 3 Songs"/></a>
    <a href="site_63.xhtml"><img src="/img/600195/600195907_3f035091f2.jpg" width="100" height="100" alt="Chennai Express Songs"/></a>
    <a href="site_11.xhtml"><img src="/img/600195/600195906_2a818232d5.jpg" width="100" height="100" alt="Aashiqui 2 Songs"/></a>
    </div>

    .container
    {
    float:right;
    position:relative;
    display:inline-block;
    }

    .container img
    {
    float:left;
    }



    while($('.container').attr('left') > 10)
    {
    $('.container').animate({marginLeft:'-=10px'},150,function() {});
    }