很早以前做网站，就用到滚动图片的JS了，当时在蓝色理想找的代码。
最近这个网站又要这个效果，原来积累的JS效果，都没了，只能重新找，发现网上最多的那个滚动图片JS代码，在xhtml1声明下没法用，于是找到了柳永法先生改写的符合W3C Web标准的滚动图片代码。我也在他的改进基础上，又做了些改进，最核心的应该是加了一个判断，就是在所有图片的宽度低于BOX的宽度时，会出现滚动一会停止滚动，就算不滚动，也会出现克隆一个END在BEGINH后面，出现图片重复。

if (scrollBegin.offsetWidth <= width) {
return false;
} else {
scrollEnd.innerHTML = scrollBegin.innerHTML;
}

这个就是防止出现这个问题的语句。另外把这个宽度也设置成为参数了。调试这个代码学会了用window.status。status在firefox中也可以开启。
scrollImg.js

//调用向左滚动
function scrollImgLeft(){
toleft("scrollBox","scrollBegin","scrollEnd",30,906,"shfd");
}
function id(id){
return document.getElementById(id);
}
//向左滚动函数，scrollBox包含scrollBegin与scrollEnd,speed是滚动速度，width为不滚动图片的最小宽度，flag有多个滚动的区别字符。
function toleft(scrollBox,scrollBegin,scrollEnd,speed,width,flag){
scrollBox = id(scrollBox);
scrollBegin = id(scrollBegin);
scrollEnd = id(scrollEnd);
if (scrollBegin.offsetWidth <= width) {
return false;
} else {
scrollEnd.innerHTML = scrollBegin.innerHTML;
}
function Marquee(){
if(scrollEnd.offsetWidth - scrollBox.scrollLeft <= 0) {
scrollBox.scrollLeft -= scrollBegin.offsetWidth;
} else{
scrollBox.scrollLeft++;
}
}
flag = setInterval(Marquee,speed);
scrollBox.onmouseover = function(){
clearInterval(flag);
}
scrollBox.onmouseout = function(){
flag = setInterval(Marquee,speed);
}
}
addLoadEvent(scrollImgLeft);

global.js

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

scrollImg.html
滚动

  <script src="global.js" type="text/javascript"></script>
  <dl>
    <dt>滚动</dt>
    <dd>
    <div id="scrollBox">
      <table cellpadding="0">
      <tbody>
      <tr>
      <td id="scrollBegin"><a href="#"><img src="http://apsay.gearhostpreview.com/wp-content/themes/panSayComic/images/logo.png" alt="图片新闻" /></a><a href="#"><img src="http://apsay.gearhostpreview.com/wp-content/themes/panSayComic/images/logo.png" alt="图片新闻" /></a><a href="#"><img src="http://apsay.gearhostpreview.com/wp-content/themes/panSayComic/images/logo.png" alt="图片新闻" /></a><a href="#"><img src="http://apsay.gearhostpreview.com/wp-content/themes/panSayComic/images/logo.png" alt="图片新闻" /></a><a href="#"><img src="http://apsay.gearhostpreview.com/wp-content/themes/panSayComic/images/logo.png" alt="图片新闻" /></a><a href="#"><img src="http://apsay.gearhostpreview.com/wp-content/themes/panSayComic/images/logo.png" alt="图片新闻" /></a><a href="#"><img src="http://apsay.gearhostpreview.com/wp-content/themes/panSayComic/images/logo.png" alt="图片新闻" /></a>
      <table cellspacing="0" cellpadding="0">
      <tbody>
      <tr>
      <td><a href="#"><img src="http://apsay.gearhostpreview.com/wp-content/themes/panSayComic/images/logo.png" alt="图片新闻" /></a></td>
      </tr>
      </tbody>
      </table>
      </td>
      </tr>
      </tbody>
      </table>
    </div>
  </dd>
</dl>
  <script src="scrollImg.js" type="text/javascript"></script>

 
scrollImg.css

#department{
position:absolute;
top:10px;
left:0;
}
#department dt{
width:949px;
height:20px;
border-bottom:1px solid #d72525;
margin:0 0 2px 0;
}
#department dt span{
margin:1px 0 0 12px;
}
#department dd{
width:947px;
height:106px;
border:1px solid #cccccc;
background:#f1f1f1;
overflow:hidden;
}
#scrollBox {
width:926px;
overflow:hidden;
margin:6px auto 0;
}
#scrollBox img {
width:121px;
height:90px;
margin:0 4px;
}

written by panhezeng \\ tags: JavaScript