脚本宝典收集整理的这篇文章主要介绍了jquery 简单的图片轮播,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
$(function(){
setTimeout(function(){
$('.kq-slider-item:first').fadeIn(); $('.kq-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');
}*/
$('.kq-slider-item:first').animate({'opacity':0},200,function(){
$(this).css('opacity',1).hide().appendTo($(this).parent());
$('.kq-slider-item:first').fadeIn();
})
}
})
// 函数重复调用,基于jQuery的方法一定要以上面的写法定义,否则这里不会生效
setInterval("$.autoSlider()",10000);
$('.kq-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');
}*/
$('.kq-slider-item:first').animate({'opacity':0},200,function(){
$(this).css('opacity',1).hide();
$('.kq-slider-item:last').prependTo($(this).parent()).fadeIn();
})
},
function(){});
$('.kq-slider-next').click(function(){
$('.kq-slider-item:first').animate({'opacity':0},200,function(){
$(this).css('opacity',1).hide().appendTo($(this).parent());
$('.kq-slider-item:first').fadeIn();
})
},
function(){})
})
以上是脚本宝典为你收集整理的jquery 简单的图片轮播全部内容,希望文章能够帮你解决jquery 简单的图片轮播所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。