Question

求Js高手，图片滚动第一次正常，但是到第二次循环时首图片往下挪了，而且停止滚动，代码见 问题补充

Js代码如下：
(function($) {
$.fn.jMarquee = function(o) {
o = $.extend({
speed:30,
step:1,//滚动步长
direction:"up",//滚动方向
visible:1//可见元素数量
}, o || {});
//获取滚动内容内各元素相关信息
var i=0;
var div=$(this);
var ul=$("ul",div);
var tli=$("li",ul);
var liSize=tli.size();
if(o.direction=="left")
tli.css("float","left");
var liWidth=tli.innerWidth();
var liHeight=tli.height();
var ulHeight=liHeight*liSize;
var ulWidth=liWidth*liSize;

//如果对象元素个数大于指定的显示元素则进行滚动，否则不滚动。
if(liSize>o.visible){
ul.append(tli.slice(0,o.visible).clone()) //复制前o.visible个li，并添加到ul的最后
li=$("li",ul);
liSize=li.size();

//给滚动内容添加相关CSS样式
div.css({"position":"relative",overflow:"hidden"});
ul.css({"position":"relative",margin:"0",padding:"0","list-style":"none"});
li.css({margin:"0",padding:"0","position":"relative"});

switch(o.direction){
case "left":
div.css("width",(liWidth*o.visible)+"px");
ul.css("width",(liWidth*liSize)+"px");
li.css("float","left");
break;
case "up":
div.css({"height":(liHeight*o.visible)+"px"});
ul.css("height",(liHeight*liSize)+"px");
break;
}

var MyMar=setInterval(ylMarquee,o.speed);
ul.hover(
function(){clearInterval(MyMar);},
function(){MyMar=setInterval(ylMarquee,o.speed);}
);
};
function ylMarquee(){

if(o.direction=="left"){
if(div.scrollLeft()>=ulWidth){
div.scrollLeft(0);
}
else
{
var leftNum=div.scrollLeft();
leftNum+=parseInt(o.step);
div.scrollLeft(leftNum)
}
}

if(o.direction=="up"){
if(div.scrollTop()>=ulHeight){
div.scrollTop(0);

}
else{
var topNum=div.scrollTop();
topNum+=parseInt(o.step);
div.scrollTop(topNum);
}
}

};

};

})(jQuery);
调用页面代码如下：
<script type="text/javascript" src="<%= fpath %>js/marquee.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".stroll2").jMarquee({
visible:4.68,
step:1,
direction:"left"
});

$(".fpicb").LoadImage(true,150,143,"<%= fpath %>images/loading.gif");

})
</script>
小弟分数不多全部奉上

Answer 1

<div id="demo">
<div id="indemo">
<div id="demo1">
<a><img src="HTML/weatherLink_1.jpg" width="150" height="50" border="0" /></a>
<a><img src="HTML/weatherLink_2.jpg" width="150" height="50" border="0" /></a>
<a><img src="HTML/weatherLink_3.jpg" width="150" height="50" border="0" /></a>
<a><img src="HTML/weatherLink_4.jpg" width="150" height="50" border="0" /></a>
<a><img src="HTML/weatherLink_5.jpg" width="150" height="50" border="0" /></a>
<a><img src="HTML/weatherLink_6.jpg" width="150" height="50" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script type="text/javascript">
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee() {
if (tab2.offsetWidth - tab.scrollLeft <= 0)
tab.scrollLeft -= tab1.offsetWidth
else {
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>
如果要改滚动方向，修改下面代码
if (tab2.offsetWidth - tab.scrollLeft <= 0)
tab.scrollLeft -= tab1.offsetWidth
else {
tab.scrollLeft++;
}

Answer 2

大哥，代码贴完全啊。CSS和HTML呢？