3/16

为您的设计
寻找专业的前端切图服务。

纯jquery手写图片滚动,原创

作为一个近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