通过jquery进行图像条带中的图像位置交换



不确定我是否正确地构建了这个问题,因为我不确定术语,对web开发来说是新手。我有一个页面,在单独的div中有四个图像,在一个父div中,设置为一条带单独链接的图像。我想交换他们的位置,比如说每2分钟通过jquery可以是随机的,也可以是循环的。

<div class="featurelisting-images">
     <div class="fl-list" id="fl1">
         <a href="/xyz.html" alt="xyz" title="xyz">
         <img src="/uploads/photo_1239.jpg"  title="xyz" alt="xyz" class=""/></a>                    
         <p class="title"><a href="/xyz.html" alt="xyz" title="xyz">xyz</a></p>
     </div>
     <div class="fl-list"    id="fl2">            
          <a href="/abc.html" alt="abc" title="abc">
          <img src="/uploads/photo_1357.jpg"  title="abc" alt="abc" class=""/></a>                    
          <p class="title"><a href="/abc.html" alt="abc" title="abc">abc</a></p>
     </div>
          // two more div elements like this...
</div>

我对Jquery的了解非常有限,正在寻找一个适合我的脚本。我试过谷歌它,但没有得到正确的解决方案,可能是因为这个功能的搜索术语错误。尝试了一些东西,但没有成功。(参见Fiddle)我尝试在Jquery中使用insert元素,而不是更改每个div元素的所有属性。

使用float:left 将所有项目放在一行中

每隔两秒钟,将第一个移动到最后。

你可以在这里找到一个工作示例。

如果我错了或者你想要别的东西,请纠正我。

<script>
  function do(){  
     var divs =  $(".featurelisting-image").children();
     var first_href = divs[0].children[0].href;
     var first_src = divs[0].children[1].src;
     var first_second_href = divs[0].children[1].children[0].href;
     var first_inner = divs[0].children[1].children[0].innerHTML;
     for(var i = 1;i< divs.length;i++){
         divs[i-1].children[0].href = divs[i].children[0].href;
         divs[i-1].children[1].src = divs[i].children[1].src;
         divs[i-1].children[1].children[0].innerHTML = divs[i].children[1].children[0].innerHTML
     }
     divs[divs.length-1].children[0].href = first_href;
     divs[divs.length-1].children[1].src = first_.src;
     divs[divs.length-1].children[1].children[0].innerHTML = first_inner;
  }
</script>

您可以将这些功能添加到计时器或按钮单击事件中。。。我没有改变所有的属性,但我想你已经明白了。。。

最新更新