隐藏箭头Carousel.js

时间:2020-05-17 16:06:50

标签: carousel

我有这个JavaScript轮播,当用户到达图库的开头或结尾时,我不知道如何隐藏箭头(上一个和下一个)。如果有人可以帮助我添加必要的脚本来隐藏这些箭头,我将不胜感激。

这是HTML的一部分


    <!--CAROUSEL-->
    <div id="content" class="content" >
    <div class="item">
    <div class="thumb_wrapper">
    <div class="thumb">
    <ul>
    <li><img  src="img350/albatarrec00.jpg" /></li>
    <li><img  src="img350/albatarrec01.jpg" /></li>
    </ul>
    </div>
    <a class="prev" href="#"></a> <a class="next" href="#"></a> </div>
    </div>
    </div>
    <!--end CAROUSEL--> 

相关脚本

$thumb_list.each(function(){
                    var $this_list  = $(this),
                    total_w     = 0,
                    loaded      = 0,
                    //preload all the images first
                    $images     = $this_list.find('img'),
                    total_images= $images.length;
                    $images.each(function(){
                        var $img    = $(this);
                        $('<img/>').load(function(){
                            ++loaded;
                            if (loaded == total_images){
                                $this_list.data('current',0).children().each(function(){
                                    total_w += $(this).width();
                                });
                                $this_list.css('width', total_w + 'px');

                                //next / prev events

                                $this_list.parent()
                                .siblings('.next')
                                .bind('click',function(e){
                                    var current = $this_list.data('current');
                                    if(current == $this_list.children().length -1) return false;

                                    var next    = ++current,
                                    ml      = -next * $this_list.children(':first').width();

                                    $this_list.data('current',next)
                                    .stop()
                                    .animate({
                                        'marginLeft'    : ml + 'px'
                                    },400);
                                    e.preventDefault();
                                })
                                .end()
                                .siblings('.prev')
                                .bind('click',function(e){
                                    var current = $this_list.data('current');
                                    if(current == 0) return false;
                                    var prev    = --current,
                                    ml      = -prev * $this_list.children(':first').width();

                                    $this_list.data('current',prev)
                                    .stop()
                                    .animate({
                                        'marginLeft'    : ml + 'px'
                                    },400);
                                    e.preventDefault();
                                });
                            }
                        }).attr('src',$img.attr('src'));
                    });
                });
            });

谢谢您的帮助

0 个答案:

没有答案