JS滚动图片.docVIP

??js效果中的滚动效果应该也是我们在浏览页面中比较常见的一个效果，其中不乏有文字滚动、图片滚动等。在这里我将以循序渐进的方式向大家讲解其滚动方法和原理。 ?? ? ? ?首先请看效果图： ??? ? ?其实做此效果是不需要添加滚动轴的，但是这样却更方便于我们了解方法原理。在叙述方法之前先介绍下此效果所用的一些属性。 ?? ? ? 1、innerHTML：inner(里面，元素)，innerHTML是用来改变对象DH内部的HTML语句。而此效果中我们所用到的a.innerHTML=b.innerHTML就是b将自己的HTML元素赋予a，用在这里就如克隆一说。 ?? ? ? 2、offsetWidth：是指对象包括边框在内的宽度。与clientWidth不同，clientWidth指对象不包括边框只包括内容的实际宽度。 ?? ? ? 3、scrollLeft：我们知道scroll是滚动轴，那么scrollLeft就是指滚动轴自左向右滚出时距离左边起点的距离。scroll有四个方向，大家依次类推。 ?? ? ? 了解了这三项基本属性，我们就有了初步实现滚动的思想。首先我们要知道一个块就有这么宽，如果里面的内容也和外边包裹它们的父标签宽度一样的话，那么滚动条的宽度肯定也与内容一样宽，根本就没得滚。只有在里面内容大于父标签内容并且对父标签设置完固定宽进行超出部分隐藏。这样即使在我们并没有控制js时也是可以实现手动拖拉滚动条的。了解这点后再说循环滚动，既然子标签要超出父标签才能实现滚动，那么循环滚动，循环展示一组图片不就是需要两组一模一样的图片首尾相接，当第一块的尾部滚过后第二块的首部立马相接，当然控制好精确到1px时，用户是根本察觉不到是两组图片在做滚动，因为是相同的。说完原理，再说实现办法，我们已经知道了scrollLeft的意思，那么要让图片向左滚，无疑就是增加它的数值，在我们手动拖拉滚动条时也会观察到向右拖拉时图片是想做移动的，scrollLeft的距离在不断增加。那么也就是说，要实现子标签图片的滚动，就要控制父标签的scrollLeft。再加上计时器，让父标签的scrollLeft每过多久增加多少不久实现了自动的图片滚动了吗？下面请看代码吧，在HTML的结构上也是需要做下详解的。 ?? ? ? ?HTML: div id=div table tr td id=td1 table cellspacing=0 cellpadding=0 tr tdimg src=images/wz1.jpg alt=//td tdimg src=images/wz2.jpg alt=//td tdimg src=images/wz3.jpg alt=//td tdimg src=images/wz4.jpg alt=//td tdimg src=images/wz5.jpg alt=//td /tr /table /td td id=td2/td /tr /table /div ?? ??结构上之所以使用table是因为是横向滚动，tr又具备不换行的特性，(保持不换行这点是必须的，横着滚，换行了照样没得滚)。如果想用table的结构做，我们首先想到是直接用一个table，两个tr将td里包裹成图片。但是并不能实现，首先，tr是不能设置宽高的，然而内容超过后连table也控制不了自己的宽，再使多余部分隐藏，因此外部首先嵌套的就是一层div，而内部使外部table的td内再嵌套一个table，再将内部td嵌套图片。可能大家都会觉得用table做的话嵌套层数太多代码太复杂，没有使用div做看着整洁，但是这个方法的可拓展性div是比不了的，但此方法也只用作横向滚动，竖向滚动tr便无法发挥自己的优势了，只能用div做，下面向大家附上div的结构参考。 HTML: div id=div1 div id=div2!-- 这里的div主要起控制不换行的作用，因为里面还要包裹两个div -- div id=div3 a href=#img src=images/tu1.jpg alt=//a a href=#img src=images/tu2.jpg alt=//a a href=#img src=images/tu3.jpg alt=//a a href=#img src=images/tu4.jpg alt=//a a href=#img src=images/tu5.jpg alt=//a /div div id=div4nbsp;/div /div /div ?? ? ?使用table制作还能减少css样式的设置，省去很多浮动。但是table中的td元素之间的间距是需要解决的，如以上代码中已经写到在包裹图片的table标签中加入cellspacing=