jquery图片播发代码(jsm_pics08_0.1)[图]
日期：2014-05-16 浏览次数：20541 次
jquery图片播放代码(jsm_pics08_0.1)[图]
本段代码由jsm官方博客发布，本篇文章用于描述源码内容。下载地址在官方博客：
http://www.cnblogs.com/jsmblog/archive/2012/04/02/2430127.html
代码：
本段代码由jsm官方博客发布，本篇文章用于描述源码内容。下载地址在官方博客：
http://www.cnblogs.com/jsmblog/archive/2012/04/02/2430127.html
代码：
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
