jquery图片播放代码(jsm_pics08_0.1)[图]

最新推荐文章于 2024-05-24 11:41:27 发布

qq543294996

最新推荐文章于 2024-05-24 11:41:27 发布

阅读量114

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/qq543294996/article/details/84179923

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本段代码由jsm官方博客发布，本篇文章用于描述源码内容。下载地址在官方博客：
http://www.cnblogs.com/jsmblog/archive/2012/04/02/2430127.html
[img]http://pic002.cnblogs.com/images/2012/388749/2012040217370517.png[/img]

代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT> 
<style type="text/css">
#jsm_pic08show ul{margin:0px;padding:0px;list-style-type:none;}
#jsm_pic08show img{border:0px;}
#jsm_pic08show{
	overflow:hidden;
	zoom:1;
}
#jsm_pic08show .pics img,#jsm_pic08show .pics,#jsm_pic08show .pics ul{
	width:490px;
	height:170px;
}
#jsm_pic08show .pics li{position:absolute;}
#jsm_pic08show ul{
	position:absolute;
	overflow:hidden;
}
</style>
</head>

<body>
<script type="text/javascript">
//0801
jQuery.fn.jsm_pic08=function()
{
	var _this=this;
	this.extend({
		pic_len:0,pic_i:-1,timetout:null,w:0,
		next:function(){
			_this.turnto(_this.pic_i+1);
		},
		pre:function(){
			_this.turnto(_this.pic_i-1);
		},
		turnto:function(i)
		{
			var old_i=_this.pic_i;
			if(_this.timetout!=null){clearTimeout(_this.timetout);_this.timetout=null;}
			if(_this.pic_i>=_this.pic_len-1)
			{
				_this.pic_i=0;
			}
			else if(i<0)
			{
				_this.pic_i=_this.pic_len-1;
			}else{
				_this.pic_i=i;
			}
			var lis=$('.pics li',_this);
			$('.jsm_pic08_num',_this).html((_this.pic_i+1)+'/'+(_this.pic_len));
			if(old_i==-1)
			{
				$(lis[_this.pic_i]).css('z-index',0).css('left','0px');
					_this.timetout=setTimeout(_this.next,3000);

			}else{
				$(lis[old_i]).css('z-index',1).css('left','0px');
				$(lis[_this.pic_i]).css('z-index',0).css('left','0px');
				$(lis[old_i]).animate({left:'-'+_this.w+'px'},200,function(){
					_this.timetout=setTimeout(_this.next,3000);
				});
			}
			//_this.timetout=setTimeout(_this.next,3000);
		}
	});
	this.pic_len=$('ul li',this).length;
	this.w=$('.pics img',this).width();	
	$('.pics li').css('left','-'+this.w+'px');
	this.turnto(0);
	$('.jsm_pic08_pre_link',this).click(this.pre);
	$('.jsm_pic08_next_link',this).click(this.next);
};
$(window).ready(function(){
	$('#jsm_pic08show').jsm_pic08();
});

</script>

<div id="jsm_pic08show">
<div class="links"><span class="jsm_pic08_num">1/1</span><a href="javascript:void(0);" class="jsm_pic08_pre_link"><</a>  <a class="jsm_pic08_next_link" href="javascript:void(0);" >></a> </div>
<div class="pics">
	<ul><li><a href="#1"><img src="1.png"/></a></li>
		<li><a href="#2"><img src="2.jpg"/></a></li>
		<li><a href="#3"><img src="3.jpg"/></a></li>
	</ul>
</div>
</div>


</body>


</html>