JQuery Carousel连续滑动鼠标悬停

时间:2013-04-04 06:58:06

标签: jquery jquery-plugins

我正在研究Jquery旋转木马,我有一个功能,它在鼠标上滑动图像,但它只滑动一次,我必须应用功能,它不断开始在鼠标上滑动图像,鼠标停止滑动。 我已经使用了间隔并在1.5分钟后调用鼠标悬停事件,但是我遇到了两个问题第一个它挂起浏览器第二个即使鼠标仍然滑动(我已尝试清除鼠标输出间隔但没有工作) 下面是我的旋转木马代码

       $(document).ready(function () {
  $('#carousel_ul_3 li:first').before($('#carousel_ul_3 li:last'));
            $('#right_scroll_3 img').mouseover(function () {   
                //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
                var item_width = $('#carousel_ul_3 li').outerWidth() + 10;

                //calculae the new left indent of the unordered list
                var left_indent = parseInt($('#carousel_ul_3').css('left')) - item_width;
                //make the sliding effect using jquery's anumate function '            
                $('#carousel_ul:not(:animated)').animate({ 'left': left_indent }, 500, function () {

                    //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                    $('#carousel_ul_3 li:last').after($('#carousel_ul_3 li:first'));

                    //and get the left indent to the default -210px
                    $('#carousel_ul_3').css({ 'left': '-210px' });

                });
                window.setInterval(event_3, 1500); //Setting Interval


            });

            $('#right_scroll_3 img').mouseout(function () {
               clearInterval
            });

            //when user clicks the image for sliding left
            $('#left_scroll_3 img').mouseover(function () {

                var item_width = $('#carousel_ul_3 li').outerWidth() + 10;

                /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
                var left_indent = parseInt($('#carousel_ul_3').css('left')) + item_width;

                $('#carousel_ul_3:not(:animated)').animate({ 'left': left_indent }, 500, function () {

                    /* when sliding to left we are moving the last item before the first list item */
                    $('#carousel_ul_3 li:first').before($('#carousel_ul_3 li:last'));

                    /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
                    $('#carousel_ul_3').css({ 'left': '-210px' });
                });
                window.setInterval(event_3, 1500);//Setting Interval

            });
});




 function event_3() {
            $("#right_scroll_3 img").mouseover();
            $('#left_scroll_3 img').mouseover();
        }

如何在鼠标悬停时连续滑动旋转木马并在鼠标上停止?

0 个答案:

没有答案