<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.container{
200px;height: 200px;border: 1px solid black;
position: relative;margin: 0 auto;overflow: hidden;
}
.container div{
200px;height: 200px;text-align: center;line-height: 200px;
font-size: 100px;font-weight: bold;position: absolute;top: 0;display: none;
}
</style>
<script src="jquery1.42.min.js"></script>
</head>
<body>
<div id="container" class="container">
<div style="background: red">1</div>
<div style="background: green">2</div>
<div style="background: gray">3</div>
<div style="background: yellow">4</div>
<div style="background: white">5</div>
</div>
<div id="container1" class="container">
<div style="background: red">6</div>
<div style="background: green">7</div>
<div style="background: gray">8</div>
<div style="background: yellow">9</div>
<div style="background: white">10</div>
</div>
<div id="container2" class="container">
<div style="background: red">6</div>
<div style="background: green">7</div>
<div style="background: gray">8</div>
<div style="background: yellow">9</div>
<div style="background: white">10</div>
</div>
<script type="text/javascript">
window.onload=function(){
var slide=new Slide("#container");
slide.init();
/* var slide1=new Slide("#container1");
slide1.time=1000;
slide1.init();
var slide2=new Slide("#container2");
slide2.time=700;
slide2.init(); */
}
</script>
<script type="text/javascript">
function Slide(selector){
this.selector=selector
this.i=0;
this.flag=false;
this.paramLength=$(this.selector+">div").length-1;
this.containerWidth="200px";
this.time=2000;
}
Slide.prototype.init=function(){
$(this.selector+">div:eq(0)").css('left',this.containerWidth).show();
var _this=this;
setInterval(function(){
_this.flag?$(_this.selector+">div:eq("+((_this.i-1)==-1?_this.paramLength:(_this.i-1))+")").show().animate({'left':'-'+_this.containerWidth},_this.time):_this.flag=true;
$(_this.selector+">div:eq("+_this.i+")").show().animate({'left':'0'},_this.time)
if(_this.i==_this.paramLength){
_this.i=-1;
}
$(_this.selector+">div:eq("+(_this.i+1)+")").css('left',_this.containerWidth).show();
_this.i++;
},_this.time)
}
</script>
</body>
</html>