div+css布局的图片连续滚动js实现代码

　　html布局代码

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>无标题文档</title>

<!--

　　* {

　　margin:0;

　　padding:0;

　　}

　　#demo {

　　/*********必须的保证超出宽度能够滚动*********/

　　width:600px;/*可视区域宽度*/

　　overflow:hidden;

　　/*********必须的保证超出宽度能够滚动*********/

　　height:80px;

　　}

　　#demo1,#demo2 {

　　width:800px;/*整个图片宽度*/

　　float:left;

　　}

　　#demo img{

　　display:block;

　　float:left;

　　}

　　#demo li {

　　float:left;

　　width:60px;

　　height:80px;

　　}

　　-->

<!--

　　#demo0 {

　　/*********必须的保证超出宽度能够滚动*********/

　　width:600px;/*可视区域宽度*/

　　overflow:hidden;

　　/*********必须的保证超出宽度能够滚动*********/

　　height:80px;

　　}

　　#demo11,#demo22 {

　　width:1020px;/*整个图片宽度*/

　　display:block;

　　height:80px;

　　}

　　#demo0 li {

　　float:left;

　　margin:0 5px;

　　width:60px;

　　height:80px;

　　}

　　-->

　　</style>

　　</head>

　　<body>

<!--结构必须的——<div class="demo">

　　</div>——结构必须的——-->

　　</ul>

　　</div>

<!--<div id="demo0">

　　<ul>

　　</ul>

　　</div>

　　</div>-->

　　toleft("demo","demo1","demo2",30,"onedemo");

　　//toright("demo0","demo11","demo22",20,"ti2");

　　</script>

　　</body>

　　</html>

　　js核心代码

复制代码代码如下:

　　//调用向左滚动

　　//toleft("demo","demo1","demo2",30,"ti1")

　　//调用向右滚动

　　//toright("demo0","demo11","demo22",20,"ti2")

　　function $(id)

　　{

　　return document.getElementById(id)

　　}

　　//向左滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。

　　function toleft(demo,demo1,demo2,speed,flag)

　　{

　　demo=$(demo);

　　demo1=$(demo1);

　　demo2=$(demo2)

　　demo2.innerHTML=demo1.innerHTML

　　function Marquee()

　　{

　　if(demo2.offsetWidth-demo.scrollLeft<=0)

　　{

　　demo.scrollLeft-=demo1.offsetWidth

　　}

　　else

　　{

　　demo.scrollLeft++

　　}

　　flag=setInterval(Marquee,speed)

　　demo.onmouseover=function()

　　{

　　clearInterval(flag);

　　}

　　demo.onmouseout=function()

　　{

　　flag=setInterval(Marquee,speed);

　　}

　　//向右滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。

　　function toright(demo,demo1,demo2,speed,flag)

　　{

　　demo=$(demo);

　　demo1=$(demo1);

　　demo2=$(demo2)

　　demo2.innerHTML=demo1.innerHTML

　　function Marquee()

　　{

　　if(demo.scrollLeft<=0)

　　{

　　demo.scrollLeft=demo2.offsetWidth

　　}

　　else

　　{

　　demo.scrollLeft--

　　}

　　flag=setInterval(Marquee,speed)

　　demo.onmouseover=function()

　　{

　　clearInterval(flag);

　　}

　　demo.onmouseout=function()

　　{

　　flag=setInterval(Marquee,speed);

　　}

　　如需要更多的功能可以参考下面的内容：

　　JavaScript 四个方向图片滚动效果

　　JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

教程首页更多教程