无初始空白的跑马灯效果

?

本来想用marquee来做一个跑马灯的效果。但是一想到marquee开始的时候总会有一段空白，就想到网上下一个一上来就填满整个容器的js跑马灯效果。我从网上直接下了一段html代码，嵌进了我的代码里，但是总是没有效果。我胡乱地改了css和style但是始终图片动也不动，我也不知道哪里出了问题。我搞了好久好久，于是狠下心来，开始看代码，打算自己把原理搞懂，把效果修复了。弄了一会儿，我就把效果恢复了。于是我把代码贴出来。原来的代码是用的表格布局的，现在我统一改成div布局。想说一句，把原理搞懂才是王道。

?

             <div id="wall_images">                <div id="wall_images_wrap">                    <div id="wall_images1">                        <img src="<{$xoops_url}>/images/marquee/1.jpg"/><img src="<{$xoops_url}>/images/marquee/2.jpg"/><img src="<{$xoops_url}>/images/marquee/3.jpg"/><img src="<{$xoops_url}>/images/marquee/4.jpg"/><img src="<{$xoops_url}>/images/marquee/5.jpg"/><img src="<{$xoops_url}>/images/marquee/6.jpg"/><img src="<{$xoops_url}>/images/marquee/7.jpg"/>                    </div>                    <div id="wall_images2">                    </div>                </div>            </div>对应的css为<style>#wall_images {    overflow: hidden;    height: 150px;    width: 670px;}#wall_images img {    margin: 0 5px 0 5px;    height: 150px;}#wall_images1, #wall_images2 {    display: inline-block;}#wall_images_wrap {    width: 4000px;}</style>

?

$(function(){var speed = 30var wall_images2=document.getElementById("wall_images2");var wall_images=document.getElementById("wall_images");var wall_images1=document.getElementById("wall_images1");wall_images2.innerHTML = wall_images1.innerHTMLwall_images1.scrollLeft = wall_images.scrollWidthfunction Marquee() {if (wall_images.scrollLeft <= 0)wall_images.scrollLeft += wall_images2.offsetWidthelse {wall_images.scrollLeft--}}var MyMar = setInterval(Marquee, speed)wall_images.onmouseover = function() {clearInterval(MyMar)}wall_images.onmouseout = function() {MyMar = setInterval(Marquee, speed)}})

这个走马灯的原理很好懂，只要你把#wall_images的overflow变成scroll就可以明白。就是利用两张图并排滚动交替实现的。这里#wall_images_wrap 的width: 4000px;很关键。只有这样，才能够有足够的宽度来容纳相同的两拍图片在同一行。#wall_images为一个相框，先固定width和height将超出其容器范围内的图片都hide掉。下一层的#wall_images_wrap因为宽度太大，肯定是撑开容器的，这也是我们期望的。这里的4000px是我们硬编码的，当然也可以用js根据img的数量和大小来动态定义。
这里还要说，img默认的是inline布局，这里把#wall_images1和#wall_images2设成inline-block。这里把它们看做内联元素之后，那么div就不会一下子占满100%的width。而是作为内联元素一样老老实实的该多大就多大。所以这里#wall_images1和#wall_images2都很长，并且等长，不会占满100%的width。
而这里如果把inline-block改成inline也是可以工作的。如果你改成inline，就不能利用盒模型来修饰div了。这里我们没有牵扯到盒模型。所以两个长长的div也可以并排滚动。
或者也可以这样，让#wall_images1和#wall_images的float:left，其他不变。还是block的div。我本来以为div还是会占满100%的width，但是发现没有。Div竟然老老实实的该是多长就是多长。也许这就是float的特性，把块级元素默认占100%的特性消除掉了。这里也可以由有效果的。
这里还要说明一点，只要#wall_images_wrap的width比两个div理论上的两倍多就可以了，多多少无所谓，你用scroll试一下就知道了。

?