源代码抄自拍拍网.问题如下:图片切换后图片对不齐,差一点.
我自己研究了一下,感觉问题在:gTop=tid*180;speed=(gTop-cTop)/10;这个地方,我设置为gTop=tid*200时相差一点,如果按他原先的那相差更远,不知这个180是怎么计算出来的.这也算是一个比较好一些的JS图片滚动.
代码如下:<style type="text/css" media="screen">
*{margin:0;padding:0;}
body {
margin:0;
padding:0;
font-size:12px;
font:12px/1.5em Tahoma, Verdana, Simsun, Microsoft YaHei, Arial Unicode MS, Mingliu, Arial, Helvetica;
}
img {
border:none;
}
ul,li {
margin:0;
padding:0;
list-style:none;
}
.slider {
position:relative;
width:560px;
height:198px;
}
.slider .pic {}
.slider .pic img {
width:560px;
height:198px;
}
.slider .num {
z-index:2;
position:absolute;
right:10px;
bottom:7px;
width:95px;
height:16px;
}
.slider .num li {
float:left;
display:inline;
width:16px;
height:16px;
line-height:16px;
margin-left:3px;
text-align:center;
color:#595959;
cursor:pointer;
}
.slider .num li.current {
background-color:#ffffff;
font-weight:bold;
color:#ff4e00;
}.slider .bg {
z-index:1;
position:absolute;
right:10px;
bottom:7px;
width:95px;
height:16px;
}
.slider .bg li {
float:left;
display:inline;
width:16px;
height:16px;
line-height:16px;
margin-left:3px;
background-color:#fff;
filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background-color:#ffffff;font-size:0;
text-align:center;
color:#595959;
font-size:0;
}</style>
</head>
 
<body>
<div class="slider" style="height:198px; overflow:hidden">
  <ul class="num" id="homePushName">
    <li id="homeAd0" class="current">1</li>
    <li id="homeAd1">2</li>
    <li id="homeAd2">3</li>
    <li id="homeAd3">4</li>
    <li id="homeAd4">5</li>
  </ul>
  <ul class="bg" id="homePushBg">
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
  </ul>
  <ul class="pic" id="homePushShow">
    <li id="homePushShow0" style="height:198px; width:560px; overflow:hidden;">
<a href="#" target="_blank"><img alt="" src="images/ad01.gif" /></a>
</li>
    <li id="homePushShow1" style="height:198px; width:560px; overflow:hidden;">
<a href="#" target="_blank"><img alt="" src="images/ad02.gif" /></a>
</li>
    <li id="homePushShow2" style="height:198px; width:560px; overflow:hidden;">
<a href="#" target="_blank"><img alt="" src="images/ad03.gif" /></a>
</li>
    <li id="homePushShow3" style="height:198px;  width:560px;overflow:hidden;">
<a href="#" target="_blank"><img alt="" src="images/ad04.gif" /></a>
</li>
    <li id="homePushShow4" style="height:198px; width:560px; overflow:hidden;">
<a href="#" target="_blank"><img alt="" src="images/ad01.gif" /></a>
</li>
  </ul>
</div>
<script type="text/javascript"> var listItem=document.getElementById("homePushShow");
var tList=document.getElementById("homePushName").childNodes;
var controlItem=[];
for(var i=0;i<tList.length;i++){
if(tList[i].nodeName.toLowerCase()=="li"){
controlItem.push(tList[i]);
}
}
var picCount=controlItem.length;
var cid=0;
var tid=Math.floor(Math.random()*picCount);
window.cTop=0
window.gTop=0;
window.speed=0;
window.controlAction="";
window.timeCount=0;
setInterval(function(){
if(cid!=tid){
gTop=tid*180;
speed=(gTop-cTop)/10;
cid=tid;
for(var i=0;i<picCount;i++){
controlItem[i].className=((i==cid)?"current":"");
}
}
if(window.cTop!=window.gTop){
window.cTop+= parseInt(speed);
listItem.style.marginTop="-"+ parseInt(window.cTop)+"px"; 
}
document.getElementById("homePushBg").style.display="block";
document.getElementById("homePushName").style.display="block";
},20);

for(var i=0;i<picCount;i++){
controlItem[i].onmouseover=function(){
var goId=parseInt(this.innerHTML)-1;
clearTimeout(window.controlAction);
window.controlAction=setTimeout(function(){
tid=goId;
timeCount=0;
},300);
}
controlItem[i].onmouseout=function(){
clearTimeout(window.controlAction);
}
}
 
setInterval(function(){
timeCount+=1
if(timeCount>=5){
window.controlAction=setTimeout(function(){
tid=tid+1;
if(tid>=picCount){tid=0;}
},20);
timeCount=0;
}
},1000);

</script>