前景提要
HDC调试需求开发(15万预算),能者速来!>>> <%@ 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"><</div> <div class="btn btn_r">></div> </div> </body> </html>