求帮忙解决 jsp 代码问题

Dragonhjj 发布于 2016/07/12 19:51
阅读 330
收藏 0
<%@ 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>


<style>
*{padding:0;margin:0; list-style:none;}
.banner{ margin:10px auto; border:5px solid #000; width:550px; height:300px; overflow:hidden;
position: relative; text-align:center;}
.banner .img {width:5000px; position: absolute; left:0; top:0;}
.banner .img li {float:left;}

.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">&lt;</div>
  <div class="btn btn_r">&gt;</div>
  
  </div>

  </body>
</html>

加载中
0
Leoops
Leoops

问题都不说,解决你妹的问题啊

0
pantrick
pantrick
问题都不说,解决你妹的问题啊
0
紅顏為君笑
紅顏為君笑
如楼上所说 让我来解决你妹的问题
0
最深的夜
最深的夜
同上,同上上,同上上上
0
赵灿
是让我们找问题,然后解决问题吗
0
尼玛个鸡
尼玛个鸡
题都不说,解决你妹的问题啊
0
immary
immary
问题都不说,解决你妹的问题啊
0
悲欢灬离合
悲欢灬离合
问题都不说,解决你妹的问题啊
返回顶部
顶部