我正在尝试制作最简单的图像幻灯片,它从div向左滚动图像。
我的问题是setInterval函数只运行一次,我正在努力解决为什么或如何修复。
非常感谢提前。我正在调用setInterval函数jQuery document.ready(function ..
<div class="highlight_Block" id="FeaturesList_block">
<div id="img_wrapper_05">
<ul id="FeaturesList_Ul">
<li id="DEMO1_000001" class="FeaturesList_li">
<img src="http://www.hostpaperz.com/wp-content/uploads/2013/06/abstract-color-349935.jpg" height="214" width="321">
</li>
<li id="DEMO1_000002" class="FeaturesList_li">
<img src="http://www.hostpaperz.com/wp-content/uploads/2013/06/Abstract-06-HD-wallpaper.jpg" width="321">
</li>
<li id="DEMO1_000003" class="FeaturesList_li">
<img src="http://www.hostpaperz.com/wp-content/uploads/2013/06/abstract-wallpapers-wallpaper-array-wallwuzz-hd-wallpaper-2830.jpg" height="214" width="321">
</li>
</ul>
</div>
</div>
setInterval(function () {
var xyPosition_05 = $("#img_wrapper_05").position();
var next_X_Position = xyPosition_05.left + 321;
next_X_Position = '-' + next_X_Position + 'px'
$("#img_wrapper_05").animate({ left: next_X_Position }, 1000);
},5000);
CSS:
.highlight_Block {
float:left;
width:321px;
height:300px;
margin-left:15px;
margin-top:15px;
background-color:aliceblue;
}
#FeaturesList_Ul {
list-style-type:none;
margin:0px;
padding:0px;
}
.FeaturesList_li{
display:inline-block;
}
#img_wrapper_05 {
width:auto;
height:214px;
position:absolute;
background-color:green;
}
答案 0 :(得分:5)
在第二次迭代中,左边的值得到两个--
setInterval(function () {
var xyPosition_05 = $("#img_wrapper_05").position();
var next_X_Position = xyPosition_05.left + 321;
next_X_Position = (next_X_Position<0? next_X_Position : -next_X_Position) + 'px'
$("#img_wrapper_05").animate({ left: next_X_Position }, 1000);
},5000);
演示:Fiddle
答案 1 :(得分:0)
动画完成后,只需使用以下代码将div设置为默认位置:
$("#img_wrapper_05").css('property','value');
那就是它! :)
答案 2 :(得分:0)
没有理由相信setInterval不起作用。如果您的图像没有滑动,可能是因为CSS错误。
步骤1:添加警报以查看它是否进入setInterval函数。
alert("setInterval Entered");
步骤2:如果您每5秒收到一次警报,则不是javascript问题。试试这个
var next_X_Position = xyPosition_05.left - 321;
next_X_Position = next_X_Position + 'px';
首次尝试后,left属性的值已经为负值。