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

复制代码 代码如下:


<!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="https://www.jb51.net/Marquee.js"></script>
<style type="text/css">
<!--
* {
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>
<div></div>
<div></div>
</div>——结构必须的——-->
<div>
<ul>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
</ul>
<ul></ul>
</div>

<!--<div>
<div>
<ul>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
<li><a href="#"><img src="" alt="图片占有位" /></a> </li>
</ul>
</div>
<div></div>
</div>-->
<script>
toleft("demo","demo1","demo2",30,"onedemo");
//toright("demo0","demo11","demo22",20,"ti2");
</script>
</body>
</html>


js核心代码

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxpjj.html