Question

我为网站实现了两个不同的jquery脚本。一个用于“取消浏览”以查看banner div中的滑动照片，另一个是用于menu div的名为magicline.js的悬停下划线。当我想使用magicline.js作为menu div时，问题是unlider停止工作。看起来这两个脚本彼此冲突。我无法弄清楚这两个脚本之间发生了什么。如果您有任何想法，请告诉我

您可以在bravodesignbc.com上查看我正在处理的网站

以下是该网站的HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />

<title>Untitled Document</title>


<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/unsliderNew.js"></script>
<script src="scripts/magicLine.js"></script>


<script>
$(function() {
    $('.banner').unslider();
});

$('.banner').unslider({
    speed: 400,               //  The speed to animate each slide (in milliseconds)
    delay: 3000,              //  The delay between slide animations (in milliseconds)
    keys: true,               //  Enable keyboard (left, right) arrow shortcuts
    dots: false,               //  Display dot navigation
    fluid: false            //  Support responsive design. May break non-responsive designs
});
</script>






</head>

<body>

<!---

--->

<div id="header">
    <div id="headerWrap">
        <div id="brand">  

            <img style="position: absolute; top: 18px; left: 0px;" src="images/bdLogo.png" />

            <h1>Bravo Design</h1>
            <h3>Renovation & Construction</h3>

        </div>
        <p id=rightHead> contact us <br /> 604.723.6059</p>
    </div>
</div>


<div class="menuWrap">
        <ul class="group" id="menu">
            <li class="current_page_item"><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>  
</div>



<div id="feature">

    <div class="banner">

        <div class="buttonPrev">
         <a href="#"  class="unslider-arrow prev"><img src="images/prev.png" /></a>
        </div>
        <div class="buttonNext">
         <a href="#"  class="unslider-arrow next"><img src="images/next.png" /></a>
        </div> 

        <div class="bottomBanner">
        <h2>Serving the lower mainland<br />
        for over twenty years
        </h2>
        </div>


         <script>
        var unslider = $('.banner').unslider();

        $('.unslider-arrow').click(function(event) {
            event.preventDefault();

            if ($(this).hasClass('next')) {
              unslider.data('unslider')['next']();  
            } else {
              unslider.data('unslider')['prev']();  
            };
        });
        </script>


        <ul>
            <li><img src="images/knappen.jpg" /></li>
            <li><img src="images/closeupChandelier.jpg" /></li>
            <li class="listBg"><h3>Slide 3</h3></li>
        </ul>
    </div>

</div>



<div id="content">
     <div id="contentWrap">
        <div id="desc"><p>Bravo Design was created by its founder Waldemar Slonina. Waldemar is pronounced “Valdemar” in Polish.  Waldemar started Bravo Design unofficially in 1992 when he arrived in Vancouver from Europe.  He originally worked for another larger company, at first, but did side jobs, where he first got a taste of owning a business.  Then, he began with a small framing business, which quickly led to more work in renovations and construction around Vancouver.  Soon, he started to gain business all around the Lower Mainland.  Since, he has worked locally in the Tri-cities and Vancouver.<br /><br />

    His former clients would classify him as reliable, on-budget, hard working, on-schedule, and diligent.  These qualities have helped him sustain a successful small business for over two decades.  He approaches each new project with enthusiasm!<p>
        </div>

        <div id="column">
        <h3 style="padding-left: 10px; padding-top: 10px;">Testimonials</h3>
        <p style="padding: 10px; padding-top: 0px;">"The job you did with our kitchen is amazing yayayayyayayda" <br />
    <i>-Art Vandelay,</i> Maple Ridge</p>
        </div>
    </div>
</div>

<div id="footer">
    <div id="footerWrap">

      <div id="leftFoot"><img style="position: absolute; top: 10px; left: 0px;" src="images/logoMini.png" />
        <p style="position: absolute; top: 10px; left: 40px;" > Bravo Design</p>
        <p style="position: absolute; top: 28px; left: 40px; font-size: 11px; border-top:solid 1px #FFF;" > Renovation & Construction</p>
          </div>

          <div id="rightFoot"><p style="font-size: 12px;">Copyright 2013. Bravo Design. All rights reserved.<br />
            Website design by <a href="http://www.thinkchameleon.com" style="color: #F00; text-decoration:none">think Chameleon</a></p></div>

    </div>
</div>

</body>
</html>

使用其他jquery脚本时，unslider无法正常工作

0 个答案: