javascript - 一个JQ问题,左右移动问题
迷茫
迷茫 2017-04-10 13:12:21
[JavaScript讨论组]

下面代码,点击一次向左,等完成后,再点击没问题,如果一直点,快速点,到头后还能跑过,这个怎么处理,是不是应该让点击执行完后才可再次点击,应该怎么写

http://jsfiddle.net/N72mP/1/

$(document).ready(function () {
    var $Imgs=$('.no-select .cover-imgs'),
        $ImgsLi=$Imgs.children('li'),
        $ImgsLen=$ImgsLi.length,
        $ImgsLeft=$('.no-select .left .arrow-img'),
        $ImgsRight=$('.no-select .right .arrow-img');
    $ImgsLeft.bind('mousedown',function(){
        if( ($Imgs.position().left >= 0) ){
            $(this).parent().addClass('none');
        }
        if( ($Imgs.position().left < 226) ){
            var nowLeft = $Imgs.position().left+226;
            $ImgsRight.parent().removeClass('none');
            $Imgs.animate({'left':nowLeft},300);
        }
    });
    $ImgsRight.bind('mousedown',function(){
        if( ($Imgs.position().left <= 226) && ($Imgs.position().left >= (-($ImgsLen-3)*226)) ){
            var nowLeft = $Imgs.position().left-226;
            $ImgsLeft.parent().removeClass('none');
            $Imgs.animate({'left':nowLeft},300);
        }
        if( $Imgs.position().left <= (-($ImgsLen-3)*226) ){
            $(this).parent().addClass('none');
        }
    });
});
迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(2)
PHP中文网


<script> $(".banpic li:first").clone(true).appendTo(".banpic") $(".banpic li:last").prev("li").clone(true).prependTo(".banpic") $(function () { var container = $('.banner'); var list = $('.banpic'); var prev = $('.prev'); var next = $('.next'); var len = $(".banpic li").length-2; var index = 1; var interval = 5000; var timer; list.width(1000*(len+2)); function animate (offset) { var left = parseInt(list.css('left')) + offset; if (offset>0) { offset = '+=' + offset; } else { offset = '-=' + Math.abs(offset); } list.animate({'left': offset}, 1000, function () { if(left > -200){ list.css('left', -1000 * len); } if(left < (-1000 * len)) { list.css('left', -1000); } }); } function play() { timer = setTimeout(function () { next.trigger('click'); play(); }, interval); } function stop() { clearTimeout(timer); } next.bind('click', function () { if (list.is(':animated')) { return; } if (index == len) { index = 1; } else { index += 1; } animate(-1000); }); prev.bind('click', function () { if (list.is(':animated')) { return; } if (index == 1) { index = len; } else { index -= 1; } animate(1000); }); container.hover(stop, play); play(); }); </script>
伊谢尔伦

题主把一个简单的幻灯片弄得太复杂了

    var $ImgsLeft=$('.no-select .left .arrow-img')
  var n=$('li img').size();
            $ImgsLeft.click(function(){
                if(n>=0)
        {
            $('ul').stop(true,true).animate({left:'-=46px'});
            n--
        }
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号