导航和bx滑块无法正常工作

时间:2016-10-17 15:49:32

标签: javascript jquery html css sliders

我正在开发一个网站,当您点击顶部的特定导航时,下面的切片会更改其中的信息。这个片段里面的信息是一个特色视频和一个侧滑块来切换特色视频,下面的一个水平滑块展示产品。

有人可以看看我的代码并告诉我它有什么问题。我一直在拍摄大约2周的麻烦,似乎无法找到解决方案:/

非常感谢

HTML:

        <link rel='stylesheet prefetch' href='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css'>
        <link rel="stylesheet" href="core_landing_styles.css">  
        <link rel="stylesheet" type="text/css" href="product_detail_new-core.css">
        <link rel="stylesheet" type="text/css" href="video_new-core.css">
        <!-- bxSlider Javascript file -->
        <script src="libs/jquery.bxslider.js"></script>
        <!-- bxSlider CSS file -->
        <link href="libs/jquery.bxslider.css" rel="stylesheet" />
        <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
        <script src="jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
        <!-- FONTS INCLUSION -->
        <link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/d268d308-355f-4fc1-b527-5f948fa77c14.css"/>


        <div class="page-container">                                                            




            <!-- + HEADER -->
            <div class="top-message-container">
                <div class="inner-container">
                    <div class="topHeroImage">
                        <img src="http://assets.daddario.com/core_landing_tst/images/core_head_logo.png" alt="Welcome to Core">
                        <div class="header_intro_text">Get started by choosing your instrument below</b>.
                        </div>
                    </div>  

                </div>
            </div>
            <!-- - END HEADER -->               


















            <!-- + NAVIGATION ... -->
            <div class="navigation-container">
                <div class="inner-container">
                    <a href="#1"><img class="guit-icon" src="http://assets.daddario.com/core_landing_tst/images/guitar_bass-icon.png"></a> <a href="#2"><img class="drum-icon" src="http://assets.daddario.com/core_landing_tst/images/percussion-icon.png"></a> <a href="#3"><img class="violin-icon" src="http://assets.daddario.com/core_landing_tst/images/orchestral-icon.png"></a> <a href="#4"><img class="sax-icon" src="http://assets.daddario.com/core_landing_tst/images/woodwinds-icon.png"></a>            
                </div>  


                <div class="main-video-container">
                    <!-- + VIDEO PLAYER AND RELATED VIDEOS -->
                    <div class="video-player-wrapper" id="1">
                        <div class="video-information">
                            <div class="video-title">Learn everything you need to know about restringing, humidifying, and even tuning. So<br/>whether behind the scenes or between sets, you can keep your guitar in tip-top shape.</div>
                        </div>
                        <div class="youtube-video-player">
                            <iframe width="736" height="414" src="https://www.youtube.com/embed/EUpEqimZyMM" frameborder="0" allowfullscreen></iframe>
                        </div>
                        <div class="side-panel-related-videos">
                            <img src="images/related_videos_up_arrow.png" alt=""><br />
                            <ul class="side-panel-list">
                                <div>
                                    <li>
                                        <div class="side-panel-video-box">
                                            <a href="">
                                                <div class="side-panel-related-video"><img src="http://img.youtube.com/vi/08nwBtS31VU/0.jpg"></div>
                                                <!--<h3>How a Set of Guitar Strings Changed Rock 'n' Roll: The D'Addario Wa...</h3>-->
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="side-panel-video-box">
                                            <a href="">
                                                <div class="side-panel-related-video"><img src="http://img.youtube.com/vi/qzYtGPwK2Ls/0.jpg"></div>
                                                <!--<h3>How to Restring Guitars With a String-Through Body</h3>-->
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="side-panel-video-box">
                                            <a href="">
                                                <div class="side-panel-related-video"><img src="http://img.youtube.com/vi/9Uzy2RtBZeg/0.jpg"></div>
                                                <!--<h3>Guitar Power 2015 ep 2. featuring Nita Strauss</h3>-->
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="side-panel-video-box">
                                            <a href="">
                                                <div class="side-panel-related-video"><img src="http://img.youtube.com/vi/W4P2KOjmvwQ/0.jpg"></div>
                                                <!--<h3>Guitar Power 2015 ep 2. featuring Nita Strauss</h3>-->
                                            </a>
                                        </div>
                                    </li>
                                </div>
                            </ul>
                            <img src="images/related_videos_down_arrow.png" alt="">
                        </div>
                        <!-- + PRODUCTS SEEN IN THIS VIDEO -->
                        <!--<div class="tab-related-products">-->
                            <h1><b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</h1>
                            <ul class="related-products-wrapper  bxslider">
                                <div class="related-products-list">
                                    <li>
                                        <div class="related-products-box">
                                            <a href="">
                                                <img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
                                                <h3>NYXL1046BT</h3>
                                                <h4>Nickel Wound, Balanced Tension, 10-46</h4>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="related-products-box">
                                            <a href="">
                                                <img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
                                                <h3>NYXL1046BT</h3>
                                                <h4>Nickel Wound, Balanced Tension, 10-46</h4>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="related-products-box">
                                            <a href="">
                                                <img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
                                                <h3>NYXL1046BT</h3>
                                                <h4>Nickel Wound, Balanced Tension, 10-46</h4>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="related-products-box">
                                            <a href="">
                                                <img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
                                                <h3>NYXL1046BT</h3>
                                                <h4>Nickel Wound, Balanced Tension, 10-46</h4>
                                            </a>
                                        </div>
                                    </li>
                                </div>
                                <div class="related-products-list">
                                    <li>
                                        <div class="related-products-box">
                                            <a href="">
                                                <img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
                                                <h3>NYXL1046BT</h3>
                                                <h4>Nickel Wound, Balanced Tension, 10-46</h4>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="related-products-box">
                                            <a href="">
                                                <img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
                                                <h3>NYXL1046BT</h3>
                                                <h4>Nickel Wound, Balanced Tension, 10-46</h4>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="related-products-box">
                                            <a href="">
                                                <img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
                                                <h3>NYXL1046BT</h3>
                                                <h4>Nickel Wound, Balanced Tension, 10-46</h4>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="related-products-box">
                                            <a href="">
                                                <img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
                                                <h3>NYXL1046BT</h3>
                                                <h4>Nickel Wound, Balanced Tension, 10-46</h4>
                                            </a>
                                        </div>
                                    </li>
                                </div>
                            </ul>
                        <!--</div>-->
                    </div>
                    <!-- - VIDEO PLAYER AND RELATED VIDEOS -->
                </div> 
            </div>
            <!-- - END NAVIGATION ... -->

            <!-- + PLAYERS CIRCLE -->
            <div class="push-notifications-container">
                <div class="inner-container">
                    <img class="pc_border_right" src="http://assets.daddario.com/core_landing_tst/images/players_circle_logo.png">
                    <div class="pc_text">Players Circle is the rewards program that gives musicians more ways to earn free gear, watch exclusive content, and win great prizes. Sign up and start earning points today!</div>
                    <div class="play_more_text">Play More. Do More. Earn More.</div>
                </div>  
            </div>
            <!-- - END PLAYERS CIRCLE -->   




            <!-- + FOOTER -->
            <div class="get-humidipak-container">
                <div class="inner-container">
                    <a href="http://daddario.com/DaddarioHome.Page?ActiveID=2626&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/d_brand_logo.png"></a>
                    <a href="http://www.woodwinds.daddario.com/woodwindsHome.Page?ActiveID=1195&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/ww_brand_logo.png"></a>
                    <a href="http://www.orchestral.daddario.com/OrchestralHome.Page?ActiveID=1191&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/orch_brand_logo.png"></a>
                    <a href="http://www.promark.com/pmHome.Page?ActiveID=3745&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/pm_brand_logo.png"></a>
                    <a href="http://www.puresoundpercussion.com/PSPHome.Page?ActiveID=2391&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/ps_brand_logo.png"></a>
                    <a href="http://www.evansdrumheads.com/EvansHome.Page?ActiveID=1194&sid=a500db6f-f545-4c91-96c7-d1daac6bf4db"><img src="http://assets.daddario.com/core_landing_tst/images/ev_brand_logo.png"></a><br><br>
                    <div class="copyright_text">Copyright 2016 © D'Addario & Company Inc.</div>
                </div>  
            </div>
            <!-- - END FOOTER -->   

        </div>          

        <script type="text/javascript" src="core_landing.js"></script>

这是我的代码笔 http://codepen.io/anon/pen/EgZAGG

0 个答案:

没有答案