jquery 实现图片轮播

最新推荐文章于 2024-08-27 19:30:26 发布

zouchao911

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量600

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/zouchao911/article/details/34886597

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<script src="jquery-1.11.1.js"></script>
<script>
var $carousel = new function(){
	this.holderWidth = 0; //内容器宽度
	this.mills = 5000; //自动轮播间隔
	this.rollpos = 0;	//当前位置
	this.width = 0;	//外容器宽度
	this.height = 0; //外容器高度
	this.bAuto = false; //是否自动轮播
	this.timer = null; //
	this.bLoop = false; //是否循环
	this.init = function(params){
		if (params.width != null)
		{
			$("#carousel").css("width", params.width + "px");
		}
		if (params.height != null)
		{
			$("#carousel").css("height", params.height + "px");
		}
		if (params.bAuto != null)
		{
			this.bAuto = params.bAuto;
		}
		if (params.mills != null)
		{
			this.mills = params.mills;
		}
		if (params.bLoop != null)
		{
			this.bLoop = params.bLoop;
		}
		
		if (this.bAuto)
		{
			this.timer = setInterval(this.autoRoll, this.mills);
		}
		this.width = parseInt($("#carousel").css("width"));
		this.height = parseInt($("#carousel").css("height"));


		var width = 0;
		$("#holder").find("img").each(function(){
			width += parseInt($(this).css("width"));
		});
		this.holderWidth = width;
		$("#holder").css("width", this.holderWidth);
		
	}
	this.autoRoll = function(){
		$carousel.roll(1);
	}
	this.roll = function(flag){
		if (flag==1)
		{
			if (this.rollpos <= (-this.holderWidth + this.width))
			{
				if (this.bLoop)
				{
					this.rollpos = 0;
				}
			}
			else
			{
				this.rollpos += -this.width;
			}
			
		}
		else if (flag == 2)
		{
			if (this.rollpos < 0)
			this.rollpos += this.width;
		}
		$ul = $("#holder");
		$ul.animate({'left': this.rollpos + 'px'},"slow");
	}
	this.stopRoll = function(){
		if (this.timer != null)
		{
			clearInterval(this.timer);
		}
	}
}

$(function(){
	$carousel.init({bAuto:true,bLoop:true,width:348});
});

</script>
<style>
	
	#carousel{
		width:538px;
		border:1px solid red;
		overflow:hidden;
		position:relative;
	}
	#carousel ul{
	   position:relative;
	   list-style-type:none;
	   margin:0;
	   padding:0;
	}
	#carousel ul li{
		float:left;
	}
	
</style>


<body>
	<div id="carousel" style="padding:10px;float:left">
		<div style="position:relative;overflow:hidden;">
			<ul id="holder">
				<li><img src="ban1.gif"></li>
				<li><img src="ban2.gif"></li>
				<li><img src="ban3.gif"></li>
			</ul>
		</div>
	</div>


	<div>
		dddddddddddddddd
	</div>


	<button οnclick="$carousel.roll(2)"><<</button>
	<button οnclick="$carousel.roll(1)">>></button>
</body>