You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
410 lines
7.1 KiB
410 lines
7.1 KiB
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%
|
|
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 'qginfo.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">
|
|
<!--
|
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
|
-->
|
|
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<style>
|
|
*::selection{
|
|
background: none;
|
|
}
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body{
|
|
width:1520px;
|
|
position:relative;
|
|
background: #F5F5F5;
|
|
}
|
|
.back{
|
|
width:1520px;
|
|
z-index: -1;
|
|
position: absolute;
|
|
|
|
}
|
|
.newheader{
|
|
height: 60px;
|
|
background-color: #00CD66;
|
|
width:1520px;
|
|
position: fixed;
|
|
z-index: 110;
|
|
top:0;
|
|
|
|
}
|
|
.head-nav{
|
|
height: 60px;
|
|
color: yellow;
|
|
position:relative;
|
|
left:-20px;
|
|
}
|
|
.head-nav #header-nav{
|
|
height: 60px;
|
|
color: yellow;
|
|
margin-top:0;
|
|
}
|
|
.logo{
|
|
|
|
}
|
|
.logo img{
|
|
height: 60px;
|
|
width: 60px;
|
|
float: left;
|
|
margin: auto 20px;
|
|
position:relative;
|
|
top:-15px;
|
|
}
|
|
.pr{
|
|
float: left;
|
|
margin: auto 10px;
|
|
}
|
|
.pr a{
|
|
color: white;
|
|
text-decoration: none;
|
|
position:relative;
|
|
top:20px;
|
|
|
|
}
|
|
.login{
|
|
height:60px;
|
|
}
|
|
.color-white{
|
|
margin: 10px 10px 10px 10px;
|
|
}
|
|
.mr5{
|
|
position:relative;
|
|
bottom: -20px;
|
|
}
|
|
body{
|
|
background-repeat: no-repeat;
|
|
background-size:cover;
|
|
background-position: 0 60px;
|
|
height:100%;
|
|
|
|
}
|
|
</style>
|
|
<!--
|
|
<img class="back" alt="" src="./img/tzsc.png">
|
|
|
|
-->
|
|
|
|
|
|
<div class="newheader">
|
|
<div class="head-nav pr" id="head-navpre1">
|
|
<ul id="header-nav">
|
|
<a class="logo">
|
|
<img alt="" src="./img/sLogo.png" >
|
|
</a>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/paths" >跳蚤市场</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/courses" >校园超市</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/shixuns">失物招领</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/competitions">资源共享</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/moop_cases">兴趣论坛</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<span class="login pr" style="float: right;">
|
|
<a href="./Login/login.jsp" class="mr5 color-white" >登录</a>
|
|
<em class="vertical-line" ></em>
|
|
<a href="/register" class="mr5 color-white">注册</a>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 以上导航 -->
|
|
|
|
|
|
|
|
<!-- 以下商品图片 -->
|
|
|
|
|
|
|
|
|
|
<style>
|
|
*::selection{
|
|
background: none;
|
|
}
|
|
#box ul li{
|
|
margin: 0;
|
|
padding:0;
|
|
list-style: none;
|
|
text-align: center;
|
|
line-height: 270px;
|
|
font-size: 30px;
|
|
}
|
|
#box{
|
|
width:650px;
|
|
height:500px;
|
|
position:relative;
|
|
left:70px;
|
|
border: 1px solid green;
|
|
}
|
|
#box li{
|
|
width:100%;
|
|
height:100%;
|
|
position:absolute;
|
|
opacity:0;
|
|
transition:1s;
|
|
|
|
}
|
|
#box ul li:FIRST-CHILD {
|
|
opacity:1;
|
|
}
|
|
.btn{
|
|
witdh:80px;
|
|
height:30px;
|
|
color:black;
|
|
top:200px;
|
|
position:absolute;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
cursor: pointer;
|
|
background: ;
|
|
}
|
|
#prevv{
|
|
left:-50px;
|
|
}
|
|
#nextt{
|
|
right:-50px;
|
|
}
|
|
.btn:HOVER {
|
|
background: rgba(0,0,0,0.05);
|
|
}
|
|
.btn:ACTIVE {
|
|
background: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.shouye{
|
|
height:500px;
|
|
position: relative;
|
|
width:800px;
|
|
border: 1px red solid;
|
|
}
|
|
.sub{
|
|
text-decoration:none;
|
|
text-align:center;
|
|
width:100px;
|
|
height:35px;
|
|
padding-top:5px;
|
|
border-radius:7px;
|
|
border: none;
|
|
background: #FFB90F;
|
|
color: white;
|
|
font-size:120%;
|
|
letter-spacing: 4px;
|
|
display: block;
|
|
vertical-align: bottom;
|
|
margin-top: 20px;
|
|
outline: none;
|
|
position: relative;
|
|
top:180px;
|
|
left:250px;
|
|
}
|
|
.picture{
|
|
border: 1px black solid;
|
|
height:500px;
|
|
position: relative;
|
|
top:100px;
|
|
left:50px;
|
|
width:800px; }
|
|
.sub:HOVER{
|
|
background: #EEAD0E;
|
|
}
|
|
.sub:ACTIVE{
|
|
background: #FFB90F;
|
|
}
|
|
</style>
|
|
<div class="picture">
|
|
<div class="shouye">
|
|
<div id="box">
|
|
<div class="btn" id="prevv" onclick="clickprev()">prev</div>
|
|
<ul>
|
|
<%! String img[]={"","",""};
|
|
int im[]={1,2};
|
|
%>
|
|
<% im[0]=1;
|
|
img[0]="./img/one.png";
|
|
img[1]="./img/look.png";
|
|
img[2]="./img/p1.png";
|
|
request.setAttribute("qq", img);
|
|
request.getAttribute("qq");
|
|
%>
|
|
|
|
<c:forEach items="${qq}" var="val">
|
|
<li class="ll" id=0><img alt="" src="${val}"> </li>
|
|
</c:forEach>
|
|
|
|
<li class="ll" id=0>美好的一天从MyDay开始</li>
|
|
<li class="ll" id=1>校园超市为你方便购物</li>
|
|
<li class="ll" id=2>失物招领让你的宝贝回家</li>
|
|
<li class="ll" id=2>资源共享丰富你的知识</li>
|
|
<li class="ll" id=2>跳蚤市场轻松解决你不需要的物品</li>
|
|
|
|
</ul>
|
|
|
|
<div class="btn" id="nextt" onclick="clicknext()">next</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var ll = document.getElementsByClassName("ll");
|
|
var pre = document.getElementById("prevv");
|
|
var next = document.getElementById("nextt");
|
|
var index = 0;
|
|
var int;
|
|
|
|
//定时器
|
|
|
|
|
|
int=self.setInterval("wrapernext()",3000);
|
|
|
|
|
|
|
|
//3秒后开始定时
|
|
//setTimeout("SetInterval()",3000);
|
|
|
|
|
|
function wrapernext(){
|
|
index++;
|
|
if(index == ll.length) index=0;
|
|
console.log(ll.length);
|
|
for(var i=0;i<ll.length;i++){
|
|
ll[i].style.opacity=0;
|
|
}
|
|
ll[index].style.opacity=1;
|
|
};
|
|
|
|
function clicknext(){
|
|
window.clearInterval(int) ;
|
|
int=null;
|
|
wrapernext();
|
|
if(int==null){
|
|
int=self.setInterval("wrapernext()",3000);
|
|
}
|
|
};
|
|
|
|
|
|
function wraperprev(){
|
|
index--;
|
|
if(index == -1) index=ll.length-1;
|
|
console.log(ll.length);
|
|
for(var i=0;i<ll.length;i++){
|
|
ll[i].style.opacity=0;
|
|
}
|
|
ll[index].style.opacity=1;
|
|
};
|
|
|
|
|
|
function clickprev(){
|
|
window.clearInterval(int) ;
|
|
int=null;
|
|
wraperprev();
|
|
if(int==null){
|
|
int=self.setInterval("wrapernext()",3000);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- 以下商品介绍 -->
|
|
|
|
|
|
<style>
|
|
.intro{
|
|
border: 1px black solid;
|
|
width:600px;
|
|
height:500px;
|
|
position: relative;
|
|
top:-400px;
|
|
left:900px;
|
|
|
|
}
|
|
.But{
|
|
border: 1px red solid;
|
|
}
|
|
.But a{
|
|
border: 1px red solid;
|
|
}
|
|
.lie0{
|
|
color: red;
|
|
}
|
|
</style>
|
|
|
|
<%! int aa[]={1,2,3,4,5,6,7,88}; %>
|
|
|
|
<% request.setAttribute("nn", aa); %>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="intro" >
|
|
<ul class="eeight">
|
|
<c:forEach items="${nn}" var="val" varStatus="index">
|
|
<c:if test="${index.index<7}">
|
|
<li class="lie${index.index }"><a>${val}</a></li>
|
|
</c:if>
|
|
|
|
</c:forEach>
|
|
|
|
|
|
</ul>
|
|
|
|
<div class="But" onclick="">
|
|
<a >
|
|
查看联系方式
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<%! String a[]={""};int b[]={11,22,33,44,55,66,77,88}; %>
|
|
<% b[7]=1;a[0]="zz"; %>
|
|
<script type="text/javascript">
|
|
$
|
|
$(document).ready(function () {
|
|
|
|
|
|
$(".But").click(function(){
|
|
console.log();
|
|
$(this).children().text("${nn[7]}");
|
|
});
|
|
});
|
|
</script> </body>
|
|
</html>
|