代码:
< style type = "text/css" > .jsfc{ width:1000px; border:1px solid #feab28; height:177px;} .jsfc .left_pic{width:109px;float:left;} .marqueeleft{ width:880px; padding:10px 0;overflow:hidden;height:153px; float:left; } .marqueeleft ul{ width:1880px;height:163px; float:left;} .marqueeleft li{ width:188px;height:163px; float:left;} .marqueeleft li div{width:188px;height:138px;} .marqueeleft li div img{ margin-left:15px;} .marqueeleft li h1{ font-weight:normal;height:25px; line-height:25px;text-align:center;} </ style > < div style = "width:8000px;" > < ul id = "marquee1_1" > < %set DataTable jxhj = get_article_list ("pic",50,10,"")% > < %foreach(DataRow dr in jxhj.Rows)% > < li > < div > < a href =" < %linkurl("pic_show ",{dr[id]})%>" > < img src = "{dr[img_url]}" alt = "" width = "166" height = "138" /> </ a > </ div > < h1 > < a href =" < %linkurl("pic_show ",{dr[id]})%>" > {dr[title]} </ a > </ h1 > </ li > < %/foreach% > </ ul > < ul id = "marquee1_2" > </ ul > </ div >
其实原理性的东西,知道个差不多就行了,对于现在所有网站都是用div+css来布局的我们来说,复制粘贴代码很容易,但是代码出了问题很难调试,对于这个滚动代码只需要把样式中的marqueeLeft里面的样式overflow:hidden先去掉,检查marquee1_1和marquee1_2的内容是不是都在同一行内,如果在同一行内,那么使用这些代码绝对是正确的。
具体原理行的东西可以参考 http://blog.sina.com.cn/s/blog_6387e82401013kx8.html 以下转自这个网页上面的内容
刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后,自己写一个滚动效果不会是什么难题了. 本文以CSS+div+js为例,详细说明无缝滚动实现原理. 首先建立四个层(div). 结构如下: id="a"(以下简称a,id="b"简称为b)为轮播的可视部分,b为轮播部分,b_1为轮播内容,但b_2和b_1要在同一行上,因为轮播的原理就是利用scrollLeft不断累加的方式实现,当b_2滚动完的时候,从b_1开始继续滚动。 下面介绍一下代码里(代码可以在网上找,也可以用本文的代码。)的各种参数的意思: 其实每个代码都大同小易 <script type="text/javascript" language="javascript"> ##代码开始## var x=document.getElementByIdx_x("a"); ##自定义变量x,getElementById是通过id获取对象。你可以理解为:将document.getElementByIdx_x("a") ##这段代码缩写为x了。这里的x你可以随便换。在这里不定义x也行不过后面的代码会麻烦点。 var y=document.getElementByIdx_x("b_1"); var z=document.getElementByIdx_x("b_2"); function test() { ##自定义函数test,test可以随便换,值为空。 if (x.scrollLeft>=z.offsetWidth) ##如果,x的scrollLeft值大于等于z的offsetWidth。 ##scrollLeft的值也就是scrollbar移动的值, 如图: ##offsetWidth是对象可视宽度。也就是z包括边框在内的宽度,因为y和z的宽度是一样的 ##所以,你这里可以把z改成y,或者直接改成z的宽度效果是一样的 x.scrollLeft-=y.offsetWidth; ##x的scrollLeft值等于x的scrollLeft值减去y的offsetWidth值。 ##其实当y完全滚动完成的时候,x的scrollLeft值和y的offsetWidth值是相等的。 ##所以这段代码意思就是x.scrollLeft=0 。 ##这里y.offsetWidth你可以换成z.offserWidth或者y的宽度值,如果换成零,去掉减号。 ##看到这里你也许会有点明白了吧?无缝滚动,其实就是不断重复滚动第一个层. ##当b_1滚动的时候,如果没有"双胞胎"的b_2,滚动的时候将显示一个b_1宽的空白 ##所以,如果没有overflow:hidden属性的话,滚动跟下面这张图是一样的 else{ ##否则 x.scrollLeft++; ##x的scrollLeft值累加,实现移动 } } var run = setInterval(test,1); ##自定义run,setInter是在规定的时间内重复调用函数,直到用clearInterval终止 ##这句代码的意思是,每1毫秒执行一次test,每隔1毫秒x的scrollLeft值加1 ##所以数值越大滚动越慢 x.οnmοuseοver=function() {clearInterval(run)}; ##当鼠标划过x的时候,终止run。滚动停止 x.οnmοuseοut=function() {run=setInterval(test,1)}; ##当鼠标离开x,继续执行test,时间为1毫秒。 </script> ##代码结束 由于本人也是处于学习阶段,所以以上内容也许有些地方说的不对,排版也许会有所欠缺,希望高手勿喷,能给我指出不足的地方,如果是新手有哪些不明白的,可以问我。比如说你不明白offsetWidth是什么之类的,大家一起探讨学习下。:) 注: <div class="b_1">和<div class="b_2">要有 "float:left;"属性,宽和高可以根据内容自定。<div id="b">的宽度要大于<div id="a">否则将不能滚动。 Ps:昨天用斜杠星号注释发表后,注释部分全不显示,所以改为用##代替,如果要用以上代码,手动删除绿色部分即可。请尊重他人劳动成果,转载注明出处。谢谢