div+css布局的圖片連續滾動js實現代碼

來源:互聯網
上載者:User

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">
<!--
* {
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 class="demo1"></div>
<div class="demo2"></div>
</div>——結構必須的——-->
<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>

<!--<div id="demo0">
<div id="demo11">
<ul>
<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>
</div>
<div id="demo22"></div>
</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=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)

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.