jsp代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>图片跑马灯效果</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
myScroll();
$.each($("#scroll").find("div.numscroll ul li span"),function(i,item){
$(item).mouseover(function(){
clearInterval(myScrollInterval);
$("div.numscroll ul li span").removeClass("hover");
$("div.numscroll ul li").eq(i).find("span").attr("class","hover");
$("div.textShow").text($("div.visable ul li").eq(i).find("a img").attr("lang"));
$("div.content")
.html($("div.visable ul li").eq(i).html())
.fadeIn("normal");
scrollPicNow=i+1;
scrollPicNow=scrollPicNow==$("div.visable ul li").length?0:scrollPicNow;
});
$(item).mouseout(function(){
myScrollInterval=setInterval(myScroll,2000);
});
});
var myScrollInterval=setInterval(myScroll,2000);
var scrollPicNow = 0;
function myScroll(){
$("div.numscroll ul li span").removeClass("hover");
$("div.numscroll ul li").eq(scrollPicNow).find("span").attr("class","hover");
//$("div.textShow").text($("div.visable ul li").eq(scrollPicNow).find("a img").attr("lang"));
$("div.content")
.html($("div.visable ul li").eq(scrollPicNow).html())
.fadeIn("slow");
scrollPicNow++;
scrollPicNow=scrollPicNow==$("div.visable ul li").length?0:scrollPicNow;
}
});
</script>
<link href="hpLogin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<!--内容区域-->
<div id="content">
<!--图片区域-->
<div style="position:relative; width:560px; height:235px; float:left;">
<div id="scroll">
<div class="visable">
<ul>
<li><a href="javascript:void(0);"><img src="1.jpg" style="width: 550px;height: 218px;" lang=""/></a></li>
<li><a href="javascript:void(0);"><img src="2.jpg" style="width: 550px;height: 218px;" lang=""/></a></li>
<li><a href="javascript:void(0);"><img src="3.jpg" style="width: 550px;height: 218px;" lang=""/></a></li>
<li><a href="javascript:void(0);"><img src="4.jpg" style="width: 550px;height: 218px;" lang=""/></a></li>
<li><a href="javascript:void(0);"><img src="5.jpg" style="width: 550px;height: 218px;" lang=""/></a></li>
</ul>
</div>
<div class="content"></div>
<div class="numscroll">
<ul>
<%
int count=5;
for(int i=0;i<count;i++){ %>
<li><span class="<%=i==0?"hover":""%>"><%=i+1 %></span></li>
<%}%>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
7641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
