本文介绍了一种使用HTML、CSS及JavaScript实现的图片连续滚动显示效果。通过编写简单的脚本，实现了图片预览和无缝滚动的功能，适用于创建动态图片展示效果。
<!--Quirks Mode-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>Fifty Studio│图片连续不间断滚动像册</title>
<link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css" />
<!--[if IE]><style>
@import url("/tutorials/demo/css/ie.css");
</style><![endif]-->
<style type="text/css">
<!--
/*--CSS Code by Forestgan http://www.forest53.com--*/
a{background:#EEE; color:#333;}
a:hover{background:#EEE;color: #666;}
#demo ul{list-style:none;}
#FGWrapper{width: 640px; margin:2em auto; background:#EEE;}
#FGLeft{float: left;padding: 10px;}
#FGThumb{float: right;padding: 10px 10px 10px 0;background:#EEE;}
#demo{overflow:hidden; width: 130px;height: 360px; background:#eee;}
#demo img {border: 0;margin-bottom: 10px;vertical-align: middle;}
#FGFooter{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:right;}
span#FGdesc2{float: left;}
-->
</style>
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('FGplaceholder').src = whichpic.href;
if (whichpic.title)
{document.getElementById('FGdesc2').childNodes[0].nodeValue = whichpic.title; }
else {document.getElementById('FGdesc2').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; }
return false;
}
else { return true; }
}
</script>
<noscript>
<style type="text/css">
#demo{overflow:auto; }
}
</style>
</noscript>
</head>
<body>
<div id="ForestganWrap">
<div id="forestganHeader"> <a href="/"><img src="/img/logo.gif" width="170" height="40" alt="Fifty Studio" class="logo" /></a>
<h1>CSS 布局演示 CSS Layout by Forestgan</h1>
<h2 id="demo_date">2006-10-30 发表</h2>
</div>
<div id="forestganMiddle"> <div id="FGWrapper">
<div id="FGLeft"><img width="480" height="360" src="/upload/bigimg/holiday102801.jpg" alt="" id="FGplaceholder" /> </div>
<div id="FGThumb">
<div id="demo">
<div id="demo1">
<ul>
<li><a href="/upload/bigimg/holiday102801.jpg" onclick="return showPic(this);" title="My Photo 1"><img width="130" height="80" src="/upload/thumb/holiday102801s.jpg" alt="" /></a> </li>
<li><a href="/upload/bigimg/holiday102802.jpg" onclick="return showPic(this);" title="My Photo 2"><img width="130" height="80" src="/upload/thumb/holiday102802s.jpg" alt="" /></a> </li>
<li><a href="/upload/bigimg/holiday102806.jpg" onclick="return showPic(this);" title="My Photo 3"><img width="130" height="80" src="/upload/thumb/holiday102806s.jpg" alt="" /></a> </li>
<li><a href="/upload/bigimg/holiday102809.jpg" onclick="return showPic(this);" title="My Photo 4"><img width="130" height="80" src="/upload/thumb/holiday102809s.jpg" alt="" /></a> </li>
<li><a href="/upload/bigimg/holiday102810.jpg" onclick="return showPic(this);" title="My Photo 5"><img width="130" height="80" src="/upload/thumb/holiday102810s.jpg" alt="" /></a> </li>
</ul>
</div>
<div id="demo2"> </div>
</div>
<script type="text/javascript">
//图片无间断滚动代码，兼容IE、Firefox、Opera
//原<a href='http://www.jb51.net' target='_blank'><font color=red>脚本</font></a>是IE only，来自网上，作者未知
//部分内容是由forestgan为了JS代码标准化，兼容以gecko为内核的浏览器于2006-10-30重写
//http://www.forest53.com
var speed=30;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('demo1');
var FGDemo2=document.getElementById('demo2');
FGDemo2.innerHTML=FGDemo1.innerHTML
function Marquee1(){
if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)
FGDemo.scrollTop-=FGDemo1.offsetHeight
else{
FGDemo.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script> </div>
<div id="FGFooter"><span id="FGdesc2">My Photo 1</span><a href="http://www.forest53.com">Design by Forestgan</a></div>
</div> </div>
</div>
<div id="forestganFooter">
<address>
演示页面设计制作： <a href="http://www.forest53.com">Forestgan</a> 采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途
<a href="javascript:history.back()">返回前一页</a>
</address>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<noscript>
google-analytics
</noscript>
<script src="/js/copyrightdemo.js" type="text/javascript"></script>
<noscript>my stat</noscript>
</body>
</html>
该文章转载自脚本之家：http://www.jb51.net/html/200701/23/6588.htm
扫一扫
2060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
