您的位置：首页 > Web前端 > JavaScript

图片连续滚动

2015-07-31 22:05 609 查看

html布局代码

复制代码代码如下:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

<script type="text/javascript" src="Marquee.js"></script>

<style type="text/css">





</style>

</head>

<body>



<div id="demo">

<ul id="demo1">

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

<li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li>

</ul>

<ul id="demo2"></ul>

</div>



<script>

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=de
b62a
mo1.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);

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JS

相关文章推荐

新的分享

章节导航