html js无缝滚动图片

很无语，刚开始学网页，前前后后搞滚动就搞了好久，往上找了好多例子文字太多不想看。。。

话不多说 ，我们先看一下效果：

首先，我们需要知道几个重要的标签：(附带一个解释链接偷懒一下http://blog.csdn.net/zxf13598202302/article/details/51162664)

offsetWidth,offsetLeft,style.left,style.width....

请记住一定要区分大小写，我调了半天（真的是半天）都没发现哪里错了，重写了一遍才恍然大悟。

首先我们先加点html和css最后再加js，

html:

< div id= "posterdiv" >

< ul id= "posterul" >

< li >

< img src= "images/poster1.jpg" >

</ li >

< li >

< img src= "images/poster2.jpg" >

</ li >

</ul>

</ div >

很简单无不需要解释，

当然，我们可以多加几个照片。

css:

#posterdiv{

overflow: hidden;

height: 300px;

width: 1500px;

}

#posterdiv ul{

overflow: hidden;

position: relative;

}

#posterdiv ul li{

float: left;

width: 480px;

height: 300px;

list-style: none;

}

#posterdiv ul li img{

width: 450px;

height: 300px;

}

不得不注释给像我这样的新手一下：

要想设置成全屏的样子，最好要设置一下宽度为：100%，在body里面需先设置width：100%，这里仅仅是为了达到效果。而且后来为了防止窗口塌

陷还需要加上min-width：。。。px；当然我们先把无缝弄完。

其中overflow：hidden使图片滚动出父级元素后不会显示在外面。

float:left，让标签并排挨着。

---------------------------------------------------------------------------------------------------------------------------

ok。。。。。。。。。。上面的准备完成后就来到我们最重要的js：

思路：我们将<li>标签找出(li[i])，move(){

不断的运行li[i].style.left=li[i].offsetLeft+speed+"px";使其每次运动speed（整数）动起来，

在其中某个li到达div.offsetwidth时将它的li[i].style.left设置为紧靠最左边元素。以此类推....效果达到了。

}

注意点：设置全屏图片滚动 每切换一张照片停一下时：

1.我们使用setInterval()循环调用move()函数时 可能遇到不断的加speed而超出屏幕导致图片不完整甚至有空白和其他相邻图片。

    这个就稍微会一点编程的都会有自己的方法改进，我是通过提前判断来避免这种问题的。

2.谨记：出现问题空白了什么的不一定是代码错了，可能仅仅是有时候滚动条出来了有时候没有滚动条了。。。

注：图为全屏滚动代码，，那个就别看了更烂。

window. onload= function() //一加载网页就运行

{

var ptdiv= document. getElementById( "posterdiv");

var ptul= document. getElementById( "posterul");

var ptli= ptul. getElementsByTagName( "li");

//获取标签

var speed= 3;

for( var i= 0; i< ptli. length; i++)

{

ptli[ i]. style. width= ptdiv. offsetWidth+ "px";

ptli[ i]. style. left=- ptdiv. offsetWidth* i+ "px";

}

//初始化每个li的width和left，使其为初始的4321格式而不是1234格式。

function move(){

for( var i= 0; i< ptli. length; i++) //循环这个就不说了

{

ptli[ i]. style. left= ptli[ i]. offsetLeft+ speed+ "px"; //滚动

if( ptli[ i]. offsetLeft< 0&& ptli[ i]. offsetLeft>=- speed)

//提前判断是否到达要显示的地方，与文章中方法大致相同

{

for( var j= i+ 1; j< ptli. length; j++) ptli[ j]. style. left= ptli[ j]. offsetLeft+ speed+ "px";

//将i后面的加完speed

var speed1= 0- ptli[ i]. offsetLeft; //设置最后一次移动距离，保证其到达0px位置。

for( var u= 0; u< ptli. length; u++)

{

ptli[ u]. style. left= ptli[ u]. offsetLeft+ speed1+ "px";

}

ptli[( i+ 1)% ptli. length]. style. left=-( ptli. length- 1)* ptdiv. offsetWidth+ "px";

clearInterval( timer); //图片全部显示便跳出函数

break;

}

}

}

setInterval( function (){ timer= setInterval( move, 5)}, 8000);

}

代码就不细说了，写的有点太小白。通过后期制作感觉还有很多需要改进的地方，第一次写博客与诸君共勉。