jquery 3D旋转banner图效果

本文主要是介绍jquery 3D旋转banner图效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.目录

2. jsp 界面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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 'index.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">
   
   <style>
       *{margin:0px;padding:0px;}//解决浏览器兼容行问题
       #box{
           width:600px;height:240px;position:absolute;//绝对定位
       }
       #picture{
           width:600px;height:240px;position:relative;top: 85px;left: 346px;
       }
       img{display:none;position:absolute;}
       #btn{
           width:150px;height:25px;
           position:absolute;top: 290px;right: 610px;
       }
       #btn ul li{
           list-style:none;width:25px;height:25px;float:left;background:#ccff99;
           border-radius:15px;text-align:center;line_height:25px;
           margin-right:5px;
       }
       #btn ul .sel{
           background:#ccffff;
       }
   </style>
   <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="box">
   <div id="picture">
           <img alt="" src="images/005.jpg" width="600" height="240" style="display:block;">
           <img alt="" src="images/470.jpg" width="600" height="240">
           <img alt="" src="images/a2341460.jpg" width="600" height="240">
           <img alt="" src="images/25b1OOOPIC19.jpg" width="600" height="240">
           <img alt="" src="images/9252150_193011306000_2.jpg" width="600" height="240">
   </div>
   
   <div id="btn">
       <ul>
           <li class="sel">1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
       </ul>
   </div>
</div>
<script type="text/javascript">
   var index = 0;
   var li = $("#btn ul li");
   var img = $("#picture img");
   var begin = null;
   $(li).hover(function(){
       clearInterval(begin);
       $(this).addClass("sel").siblings().removeClass("sel");
       var index = $(this).index();
       $(img).eq(index).show().siblings().hide();
   },function(){
       auto();
   });
   function auto(){
       begin = setInterval(function(){
           index ++ ;
           if(index <$(li).size()){
               $(li).eq(index).addClass("sel").siblings().removeClass("sel");
               $(img).eq(index).show().siblings().hide();
           }else{
               index =-1;
           }

       },1000);
   };
   auto();
</script>
</body>
</html>