jquery 简单的图片轮播

2024年4月25日 227次阅读 来源: GongChao 
$(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(){})
    })
    原文作者：GongChao
    原文地址: https://segmentfault.com/a/1190000000440432
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞