用面向对象方法写的轮播图效果 

<%@ 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{
width: 200px;height: 200px;border: 1px solid black;

position: relative;margin: 0 auto;overflow: hidden;
}
.container div{
width: 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>

　　

posted @ 2017-02-08 16:55  刘浩2561179983  阅读(304)  评论(0)    收藏  举报