jq编写轮播插件

自己动手写了个插件，不过个人感觉思路不是特别好(别人十几行代码硬是让我写成了几十行。。哈哈，太水了，有待提高)，不知道网上的是什么思路。不过也算是做出来了，还没有去认真学习JQ，暂时先这样吧，有空再去看下这个框架。以前觉得做前端比较容易上手，现在觉得做前端，想要精通，难啊~~~突然想回去做后台了

。

贴上代码：

<ul >
<li  id="pre" class="pre"><</li>
<li  class="img show"  ><img src="img/1.jpg"/></li>
<li class="img" ><img src="img/2.jpg"/></li>
<li class="img" ><img src="img/3.jpg"/></li>
<li  class="img"  ><img src="img/1.jpg"/></li>
<li class="img" ><img src="img/2.jpg"/></li>
<li class="img" ><img src="img/3.jpg"/></li>

<li id="next" class="next">></li>
</ul>

$.extend({
set_slider:function(pic_w,time){

var img_list=$('.img');
var left;
$(img_list[img_list.length-1]).css('z-index','1');
$(img_list[0]).css('z-index',img_list.length);

$('#pre').click(function(){

if($('.show').prev().attr('class')=='img')	//如果当前展示的图片的下一个LI仍然是图片LI
{
$('.show').css('z-index','3');
$('.show').prev().css('z-index','2');
var cur_left=parseInt($('.show').css('left'));//0

$('.show').prev().css('left',(parseInt(cur_left)-pic_w)+'px');//pic_w
$('.show').animate({left:(cur_left+pic_w)+'px'},time);//-pic_w
var new_show=$('.show').prev();
//$('.show').prev().addClass('show');//下一个元素成为了show
$('.show').removeClass('show');//前一个移除了show
$(new_show).addClass('show');
var next_left=parseInt($('.show').css('left'));//pic_w

$('.show').animate({left:(next_left+pic_w)+'px'},time);//0

}
else//如果已经是最后一张了，将其余的放在右边，并把第一张图为.show
{

$('.show').css('z-index','3');
$(img_list[img_list.length-1]).css('z-index','2');
var cur_left=parseInt($('.show').css('left'));//0
$(img_list[img_list.length-1]).css('left',(cur_left-pic_w)+'px');
$('.show').animate({left:(cur_left+pic_w)+'px'},time);//-pic_w
$('.show').removeClass('show');
$(img_list[img_list.length-1]).addClass('show');

var next_left=parseInt($('.show').css('left'));//pic_w
$('.show').animate({left:(next_left+pic_w)+'px'},time);//-pic_w

}
});

$('#next').click(function(){

if($('.show').next().attr('class')=='img')	//如果当前展示的图片的下一个LI仍然是图片LI
{
$('.show').css('z-index','3');
$('.show').next().css('z-index','2');
var cur_left=parseInt($('.show').css('left'));//0

$('.show').next().css('left',(parseInt(cur_left)+pic_w)+'px');//pic_w
$('.show').animate({left:(cur_left-pic_w)+'px'},time);//-pic_w

var new_show=$('.show').next();
$('.show').removeClass('show');//前一个移除了show
$(new_show).addClass('show');//下一个元素成为了show

var next_left=parseInt($('.show').css('left'));//pic_w

$('.show').animate({left:(next_left-pic_w)+'px'},time);//0

}
else//如果已经是最后一张了，将其余的放在右边，并把第一张图为.show
{

$('.show').css('z-index','3');
$(img_list[0]).css('z-index','2');
var cur_left=parseInt($('.show').css('left'));//0
$('.show').animate({left:(cur_left-pic_w)+'px'},time);//-pic_w
$('.show').removeClass('show');
$(img_list[0]).addClass('show');
$(img_list[0]).css('left',(cur_left+pic_w)+'px');
var next_left=parseInt($('.show').css('left'));//pic_w
$('.show').animate({left:(next_left-pic_w)+'px'},time);//-pic_w

}

});

}

});

$(function(){

$.set_slider(1902,100);//参数:第一个是设置的图片宽度，第二个为图片移动速度，单位为毫秒,样式没有通过参数去设置是为了更灵活//一点，任何东西封装得越是完整，就越失去了其灵活性,没有添加自动播放，可以自行添加setInterval方法，本博客只做学习记录，如若不屑，请到网上找大神的代码看也行。

});