0

我的页面顶部有一个图像滑块，下面是我的产品，问题是当我使用选择框对产品进行排序时，由于滑块重新加载并重置到第一张幻灯片，页面会闪烁。我希望产品可以排序，而无需重新加载滑块并再次重置到第一张幻灯片？我已经阅读了很多关于闪烁主题的文章，但我对 javascript 和 php 还很陌生，而且我还在苦苦挣扎

下面的代码来自 productlist.php 文件，其中在 body 标记、标题、滑块和产品列表中调用了 3 个 include。

另外...由于某种原因，如果页面底部的两个调用脚本与其他脚本一起放在头部，则滑块会中断。我不知道为什么会这样。

?><?php
// GLOBAL INCLUDES 
require_once("Application.php");
?>
<!DOCTYPE html>
<html>
<head>
    <title>Product Listings | <?php echo $_ENV["request.cwpage"]["title"]; ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Description" content="<?php echo ((isset($_ENV["request.cwpage"]["description"])) ? $_ENV["request.cwpage"]["description"] : "" ); ?>">
    <?php // CARTWEAVER CSS ?>
    <!--- START CARTWEVER CORE CSS --->
    <link href="cw4/css/cw-core.css" rel="stylesheet" type="text/css">
    <!--- END CARTWEVER CORE CSS --->   
    <!--- START HEADER CSS --->     
    <link href="cw4/style_sheets/header.css" rel="stylesheet" type="text/css">  
    <!--- END HEADER CSS --->

    <!--- START LINKS FOR PP_slider --->        
    <link rel="stylesheet" type="text/css" href="cw4/style_sheets/container_p2.css" />
    <link rel="stylesheet" type="text/css" href="cw4/style_sheets/customer_info_panel.css" />
    <link rel="stylesheet" type="text/css" href="cw4/style_sheets/slit_slider_style_2.css" />
    <link rel="stylesheet" type="text/css" href="cw4/style_sheets/slit_slider_style_custom_2.css" />
    <link rel="stylesheet" type="text/css" href="cw4/style_sheets/customer_info_panel.css" />
    <link rel="stylesheet" type="text/css" href="cw4/style_sheets/share_tab_2.css" />
    <script type="text/javascript" src="cw4/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="cw4/js/modernizr.custom.79639.js"></script>
    <noscript><link rel="stylesheet" type="text/css" href="cw4/style_sheets/slit_slider_styleNoJS.css" /></noscript>


    <script type="text/javascript" src="cw4/js/jquery.ba-cond.min.js"></script>
    <script type="text/javascript" src="cw4/js/jquery.slitslider.js"></script>

    <script type="text/javascript"> 
        $(function() {

            var Page = (function() {

                var $nav = $( '#nav-dots > span' ),
                    slitslider = $( '#slider' ).slitslider( {
                        onBeforeChange : function( slide, pos ) {

                            $nav.removeClass( 'nav-dot-current' );
                            $nav.eq( pos ).addClass( 'nav-dot-current' );

                        }
                    } ),

                    init = function() {

                        initEvents();

                    },
                    initEvents = function() {

                        $nav.each( function( i ) {

                            $( this ).on( 'click', function( event ) {

                                var $dot = $( this );

                                if( !slitslider.isActive() ) {

                                    $nav.removeClass( 'nav-dot-current' );
                                    $dot.addClass( 'nav-dot-current' );

                                }

                                slitslider.jump( i + 1 );
                                return false;

                            } );

                        } );

                    };

                    return { init : init };

            })();

            Page.init();

        });


    </script>
 <!--- END LINKS FOR PP_slider --->       


</head>
    <body class="cw"> 

        <!--- Server Side Include for the site header --->
        <?php include('_cw4-tmplt-ft1_header-include.php');?>

        <!--- Server Side Include for pp_slider --->
        <?php include('_cw4-tmplt-ft1_pp_slider-include.php');?>

        <?php
        // CARTWEAVER INCLUDE: product details 
        include("cw4/cw-productlist.php");
        ?>

    </body> 

    <script type="text/javascript" src="cw4/js/showhide.js"></script>
    <script src="cw4/js/styleswitch.js" type="text/javascript"></script>


</html
4

0 回答 0