ServiceSelectionNavigation一行显示六个块的滑动效果

lansdmn

于 2010-02-25 17:06:00 发布

阅读量641

点赞数

分类专栏： JavaScript 文章标签： wrapper function textbox server interface class

本文链接：https://blog.youkuaiyun.com/lansdmn/article/details/5326843

版权

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

        var $parentWrapper = $(".infiniteCarousel");
        var $wrapper = $('> div', $parentWrapper).css('overflow', 'hidden');
        $slider = $wrapper.find('> ul');
        $items = $slider.find('> li');
        $single = $items.filter(':first');

singleWidth = $single.outerWidth();
visible = Math.floor($wrapper.innerWidth() / singleWidth); // doesn't include padding or border

pages = Math.ceil($items.length / visible);

        //All children total width
        var $childrenWidth = singleWidth * $items.length;
        var $wrapperWidth = $wrapper.innerWidth();
        currentPage = 1;
        var $selectedIndex = $(".txt_Hidden").val() ? parseInt($(".txt_Hidden").val()) : 0;
        var indexPage = Math.floor($selectedIndex / visible);

        if (indexPage > 0 && indexPage <= pages) {
            $wrapper.scrollLeft(singleWidth * visible * indexPage);
            currentPage = indexPage + 1;
        }

        // paging function
        function gotoPage(page) {
            if (page <= 0) {
                return;
            }
            var dir = page < currentPage ? -1 : 1;
            n = Math.abs(currentPage - page);
            left = singleWidth * dir * visible * n;
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft: '+=' + left
            }, 500, function() {
                currentPage = page;
            });
            return false;
        }

$wrapper.after('<a class="arrow back"></a><a class="arrow forward"></a>');

        // Bind to the forward and back buttons
        $('a.back', $parentWrapper).click(function() {
            if ($wrapperWidth < $childrenWidth) {
                return gotoPage(currentPage - 1);
            }
        });

        $('a.forward', $parentWrapper).click(function() {
            if (($wrapperWidth < $childrenWidth) && (currentPage < pages)) {
                return gotoPage(currentPage + 1);
            }
        });

        // create a public interface to move to a specific page
        $parentWrapper.bind('goto', function(event, page) {
            gotoPage(page);
        });

        var $items = $('ul>li', '.infiniteCarousel');
        $items.each(function() {
            var $hidtTextbox = $(".txt_Hidden");
            var $serviceItem = $('.service_item', $(this));
            var $proCofirm = $serviceItem.attr('confirm');

            var selectFn = function() {
                $(this).closest('.item_wrapper').addClass('item_wrapper_selected');
                //$(this).closest('.item_wrapper').css({ 'margin-top': '3px', 'width': '91px', 'height': '42px', 'background': 'url(../../../CommonModule/UI/images/serviceOption_notConfirm_big.png)' });
            };
            var unselectFn = function() {

            if ($serviceItem.attr('index') != $hidtTextbox.val()) {
                $(this).closest('.item_wrapper').removeClass('item_wrapper_selected');
                //    $(this).closest('.item_wrapper').css({ 'margin-top': '0', 'width': '81px', 'height': '36px', 'background': 'url(../../../CommonModule/UI/images/serviceOption_notConfirm_small.png)' });
            }
            };
            if ($hidtTextbox.val() && $serviceItem.attr('index') == $hidtTextbox.val()) {
                selectFn.call($serviceItem);
            }

            if ($proCofirm == "False") {
                //$serviceItem.css('color', '#808080');
                $serviceItem.css('cursor', 'default');
            }
            $serviceItem.mouseover(selectFn);
            $serviceItem.mouseout(unselectFn);
            $serviceItem.click(function() {
                if ($proCofirm != "False") {
                    $hidtTextbox.val($serviceItem.attr('index'));
                    $('.btn_Hidden')[0].click();
                }
            });
        });
    }
</script>
<asp:Button ID ="Btn_Hidden" CssClass="btn_Hidden" runat="server" οnclick="Btn_Hidden_Click" style="display:none;"></asp:Button>
<asp:TextBox ID="Txt_Hidden" CssClass="txt_Hidden" runat="server" style="display:none;"></asp:TextBox>