循环滚动图片

a萝卜

浏览: 4344 次
性别:
来自: 成都

最近访客更多访客>>

2487962411

Freedom_Coder

db300

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

JSP HTML

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'a.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


</head>
<script type="text/javascript" src="jquery_1.4_All.js"></script>

<script language="javascript">
var speed = 30;//设置间隔时间
$(function(){
//alert(demo.style.backgroundColor);
var MyMar = setInterval("Marquee(5)",speed);
demo.onmouseout=function(){//继续滚动
MyMar = setInterval("Marquee(5)",speed);
}
demo.onmouseover=function(){//停止滚动
clearInterval(MyMar);
}
if(demo.offsetWidth < marquePic1.offsetWidth) {
marquePic2.innerHTML=marquePic1.innerHTML;
}
})
function Marquee(n){//实现图片循环滚动的方法
if(marquePic2.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft=0;
}else{
demo.scrollLeft+=n;
}
}
</script>
<body>
    <div id="demo" style="overflow: hidden; width: 350px; height: 200px; background-color:#00cc66;">
    <table border="1" cellspacing="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="a/<%= i%>.jpg" width="118" height="166" border="1"></td>
    <%} %>
    </tr>
    </table>
    </td>
<td id="marquePic2" width="1"></td>
    </tr>
    </table>
    </div>
</body>
</html>

分享到：