1.概述
循環滾動圖片，不僅可以增添Web頁面的動態效果，而且可以節省頁面空間，有效地保證在有限的頁面中顯示更多的圖片。
2.技術要點
主要應用setTimeout()方法實現圖片的循環滾動效果。setTimeout()方法的語法格式如下：
setTimeout（function,milliseconds,[arguments]）
參數說明：
a.
function：要調用的JavaScript自定義函數名稱。
b.
Milliseconds：設置超時時間（以毫秒為單位）。
功能：經過超時時間後，調用函數。此值可以用clearTimeout()函數清除。
3.具體實現
（1）在頁面的合適位置添加一個id屬性為demo的<div>標記，並在該標記中添加表格及要要滾動顯示的圖片。關鍵代碼如下：
<div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;">
<table
border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td
valign="top"
id="marquePic1">
<!--
要循環滾動的圖片
-->
<table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
>
<tr
align="center">
<%for(int
i=1;i<8;i++){%>
<td>
<img
src="Images/<%=i%>.jpg"
width="118"
height="166"
border="1">
</td>
<%}%>
</tr>
</table>
</td>
<td
id="marquePic2"
width="1"></td>
</tr>
</table>
</div>
（2）編寫自定義的JavaScript函數move()，用於實現無間斷的圖片循環滾動效果。speed數值越大圖片滾動的越快，具體代碼如下：
<script
language="javascript">
var
speed=30
;
//設置間隔時間
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//獲取demo對象
function
Marquee(n){
//實現圖片循環滾動的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滾動
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//繼續滾動
MyMar=setInterval("Marquee(5)",speed);
}
</script>
以上所述是小編給大家介紹的JavaScript代碼實現圖片循環滾動效果的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
『貳』 浮動窗口的代碼 （html/js）
第一種方法:
Html代碼
<html>
<head>
<title>浮動窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/overflow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = $("#b");
var overFlow = $("#over");
b.click(function(){
overFlow.fadeIn();
$("#mask").css("background","#111");
$("#mask").css("opacity","0.8");
})
$("#close").click(function(){
overFlow.fadeOut();
$("#mask").css("background","#fff");
$("#mask").css("opacity","1");
});
drag($("#over"),$("#title"));
}) ;
</script>
</head>
<body>
<div id="over">
<div id="title"><span id="t">這只是一個演示標題</span><span id="close">[ x ]</span></div>
<div id="content">
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>
---This is edited by Alp.
</div>
</div>
<div id="mask"> <a id="b" href="#">click</a></div>
</body>
</html>
Js代碼
function drag(overFlow,title){
title.onmousedown = function(evt){
var doc = document;
var evt = evt || window.event;
var x = evt.offsetX?evt.offsetX:evt.layerX;
var y = evt.offsetY?evt.offsetY:evt.layerY;
if(overFlow.setCapture){
overFlow.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove = function(evt){
evt = evt || window.event;
var xPosition = evt.pageX || evt.clientX;
var yPosition = evt.pageY || evt.clientY;
var newX = xPosition - x;
var newY = yPosition - y;
overFlow.style.left = newX;
overFlow.style.top = newY;
};
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove=null;
doc.onmouseup=null;
};
};
}
css代碼
#over{
position: absolute;
left: 300px;
top: 200px;
border: 1px solid black;
display: none;
background: #cccccc;
cursor: default;
width: 300px;
z-index: 10;
opacity: 1;
}
#title{
border: 1px solid #1840C4;
background: #95B4DC;
padding: 2px;
font-size:12px;
cursor: default;
}
#close{
cursor: pointer;
margin-right: 1px;
overflow: hidden;
}
#content{
border: 1px solid #C2D560;
background: #EFF4D7;
}
#t{
margin-right:145px;
}
#mask{
z-index: 1;
background: #fff;
width: 1024px;
height: 800px;
}
#b{
position: absolute;
left: 200px;
top: 100px;
}
body{
padding: 0px;
margin: 0px;
}
#over{
background: transparent;
}
第二種方法:
消息框遮罩層:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"></iframe><div id="show_upload">nothing...</div>'
頁面載入loading中:<div id="body_loading" onClick="loaded();"><img src="__PUBLIC__/images/body_load.gif"></div>
關閉浮動窗口:<a href="javascript:hideupload()">關閉窗口建議用小圖片</a>
打開浮動窗口:<a href="javascript:showupload('admin.php')">打開浮動</a>
// 消息框loading
function loading(){
var o = $('#body_loading');
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px");
o.fadeIn("fast");
}
// 消息框消失
function loaded(){
var o = $('#body_loading');
o.fadeOut("fast");
}
// 隱藏浮動窗口
function hideupload(){
$('#show_upload').hide();
$('#show_upload_iframe').hide();
}
// 彈出浮動窗口
function showupload(ajaxurl){
loading();
var o=$('#show_upload');
var f=$('#show_upload_iframe');
var top = 200;
$.ajax({
url: ajaxurl,
//cache: false,
success: function(res){
loaded();
o.html(res);
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
if($(document).scrollTop()>200){
top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);
}
o.css("top",top+"px");
f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')});
f.show();
o.show();
}
});
}