作为一个近10年web前端切图工龄的“大龄前端” 来说，jquery一定是得玩的很溜了，因为很早就接触了，在切图网（qietu.com）的一些前端项目切图中，经常会碰到有的地方无法用插件，需要完全好定制的情况，所以就需要发挥一下手写jquery的技能了，

要手写一个图片滚动不难，主要是要搞明白原理，下面只附了JS代码，纯原创，可以看思路：

/*幻灯片*/
$(function(){
setTimeout(function(){
$(‘.slider-list li:first’).fadeIn(); $(‘.slider’).css(‘background-image’,’none’);
},600);

$.extend({
autoSlider:function(){

/*if($(‘.slider .item.selected’).next().size()==0){
$(‘.slider .item.selected’).removeClass(‘selected’).parent().find(‘.item:first’).addClass(‘selected’);
}
else{
$(‘.slider .item.selected’).removeClass(‘selected’).next().addClass(‘selected’);
}*/
$(‘.slider-list li:first’).animate({‘opacity’:0},200,function(){
$(this).css(‘opacity’,1).hide().appendTo($(this).parent());
$(‘.slider-list li:first’).fadeIn();
})
}
})
// 函数重复调用，基于jQuery的方法一定要以上面的写法定义，否则这里不会生效
setInterval(“$(function(){$.autoSlider()})”,10000);

$(‘.slider-prev’).click(function(){

/*if($(‘.slider .item.selected’).next().size()==0){
$(‘.slider .item.selected’).removeClass(‘selected’).parent().find(‘.item:first’).addClass(‘selected’);
}
else{
$(‘.slider .item.selected’).removeClass(‘selected’).next().addClass(‘selected’);
}*/
$(‘.slider-list li:first’).animate({‘opacity’:0},200,function(){
$(this).css(‘opacity’,1).hide();
$(‘.slider-list li:last’).prependTo($(this).parent()).fadeIn();
})
});

$(‘.slider-next’).click(function(){

$(‘.slider-list li:first’).animate({‘opacity’:0},200,function(){
$(this).css(‘opacity’,1).hide().appendTo($(this).parent());
$(‘.slider-list li:first’).fadeIn();
})
})
})

特别用到了一个  $.extend 的jquery扩展方法，可以get一下，以后还会有很多场合需要用到。

手写相比于套用插件的好处就是，你可以以不变应万变，解决很多各种各样的图片滚动效果，想学web前端实战吗？加微信 dingxiangming82