这个是我17年之前做一个电商项目的时候写的,进行了脱敏处理,先公布给大家,希望对各位有所帮助。
<%@ 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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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>
<script type="text/javascript" src="js/jquery.filedrop.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>
注意几点:
1. css样式。 2. html代码 3. jquery代码。