不确定我是否正确地构建了这个问题,因为我不确定术语,对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>
您可以将这些功能添加到计时器或按钮单击事件中。。。我没有改变所有的属性,但我想你已经明白了。。。