我需要使用 jquery 设计基本图像 slider ,在宽度 (312px X 214px) 的 div 中显示图像。页面加载时,循环显示图像连续;每 5 秒从左向右滑动一次。
在函数FeaturedPropertyImgSlider中,我可以使用jquery动画将div向左滑动,但只能滑动一次。???
非常感谢
HTML
<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="/photos/demo1-000001-p-w-1.jpg" height="214" width="321">
</li>
<li id="DEMO1_000002" class="FeaturesList_li">
<img src="/photos/demo1-000001-p-w-2.jpg" height="214" width="321">
</li>
<li id="DEMO1_000003" class="FeaturesList_li">
<img src="/photos/demo1-000001-p-w-3.jpg" height="214" width="321">
</li>
</ul>
</div>
</div>
jQuery
$("#FeaturesList_Ul").append("<li id=" + featured_prop.prop_list[index] + " class='FeaturesList_li'><img src='" + featured_prop.prop_img_url[index] + "' height='214' width='321' /></li>");
调用函数来运行 slider
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
#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;
}
最佳答案
生产 slider 的问题比您想象的更复杂。对于这样一个简单的任务,除非你有很好的 jQuery 技能,否则从头开始编写它就有点大材小用了。我推荐循环插件
http://jquery.malsup.com/cycle/
结帐“向左滚动”我相信这就是您想要的:
http://jquery.malsup.com/cycle/browser.html
<小时/>那么它应该是这样的
$('#FeaturesList_Ul').cycle({
fx: 'scrollLeft',
speed: 300,
timeout: 2000
});
你可能需要稍微改变你的CSS。祝你好运!
关于javascript - 在 div 中显示图像并每 5 秒旋转一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17909398/