求帮忙解决 jsp 代码问题

发布于 2021-11-30 01:47:15 字数 4854 浏览 681 评论 6

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags" %>

<%

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>

<link href="css/main.css" rel="stylesheet" type="text/css" />

<title>首页</title>

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function (){

var i=0;

var clone=$(".banner .img li").first().clone();

$(".banner .img").append(clone);

var size=$(".banner .img li").size();

for(var j=0;j<size-1;j++){

$(".banner .num").append("<li></li>")

}

alert(size);

$(".banner .num li").first().addClass("on");

/*鼠标划入点*/

$(".banner.num li").hover(function(){

var index=$(this).index();

i=index;

$(".banner .img").stop().animate({left:-index*550},500)

$(this).addClass("on".siblings().removeClass("on"))

})

/*自动轮播*/

var t=setInterval(moveL,2000)

/*对banner定时器的操作*/

$(".banner").hover(function(){

clearInterval(t);

}function(){

t=setInterval(moveL,2000)

})

/*向左按钮*/

$(".banner .btn_l").click(function(){

moveL()

})

/*向右按钮*/

$(".banner .btn_r").click(function(){

moveR()

})

function moveL(){

i++;

if(i==size){

$(".banner. img").css({left:0});

i=1;

}

$(".banner .img").stop().animate({left:-i*550},500)

if(i==size-1){

$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on")

}else{

$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on")

}

}

function moveR(){

i--;

if(i==-1){

$(".banner.img").css({left:-(size-1)*550});

i=size-2;

}

$(".banner .img").stop().animate({left:-i*550},500)

$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on")

}

})

</script>

.banner.num{ position:absolute; width:100%; bottom:10px; left:0; text-align:center; font-size: 0px;}

.banner.num li{ width:10px; height:10px; background:#888; border-radius:50%;

display:inline; margin:0 3px; cursor:pointer; behavior:url(ie-css3.htc);}

.banner.num li.on{background:#F60; }

.banner.btn{width:30px; height:50px; background:#888; position:absolute; top:50%; margin-top:-25px;

cursor:pointer; text-align:center; line-height:50px; color:#fff; font-size:40px; font-family:"宋体";

display:none;}

.banner:hover .btn{display:block;}

.banner.btn_l{left:0;}

.banner.btn_r{right:0;}

</style>

</head>

<body>

<div class="banner">

<ul class="img">

<li><a href="#"><img src="<%=request.getContextPath()%>/picture/1.jpg" width="550px" height="300px"></a></li>

<li><a href="#"><img src="<%=request.getContextPath()%>/picture/2.jpg" width="550px" height="300px"></a></li>

<li><a href="#"><img src="<%=request.getContextPath()%>/picture/3.jpg" width="550px" height="300px"></a></li>

<li><a href="#"><img src="<%=request.getContextPath()%>/picture/4.jpg" width="550px" height="300px"></a></li>



</ul>



<ul class="num">

</ul>



<div class="btn btn_l"><</div>

<div class="btn btn_r">></div>



</div>