javascript - unslider滑动图片问题

Question

当我将 unslider-arrows 添加到 unslider 横幅时，它无法在图像之间正确滑动。当移动到下一张图片时，它会从 .banner div 的顶部开始将图片从小尺寸调整为完整尺寸。
* 注意:它只是在没有任何用户输入的情况下像这样滑动。你可以在我提供的链接上看到这个。

www.bravodesignbc.com

由于我不是 JavaScript 大师，所以我不确定如何解决这个问题。我不认为 css 有问题，但我可能错了。这是横幅和 unslider-arrows 的 html 和 javascript

<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() {
            var fn = this.className.split(' ')[1];

            //  Either do unslider.data('unslider').next() or .prev() depending on the className
            unslider.data('unslider')[fn]();
        });
        </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>    

这是CSS

/*********banner********/


#feature{
    margin-top: 60px;
    margin-bottom: 60px;
    position: relative;
    height: 400px;
    width: 100%;
    background-color: #FFF;

}

.banner{
    position: relative; 
    overflow: auto; 
    margin: 0 auto;
    width: 800px;
    height: 400px;
    padding: 0px;
}

.banner ul{
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.banner li { 
    padding: 0px;
    margin: 0px;
    float: left;
    height: 400px;
    width: 800px;
     }

.banner ul li img{
    padding: 0px;
    margin: 0px;
}

.buttonPrev {
    z-index: 1;
    position: absolute;
    left: 3%;
    top:180px;
    width: 35px;
    height:70px;

}

.buttonNext {
    z-index: 1;
    position: absolute;
    right: 3%;
    top:180px;
    width: 35px;
    height:70px;
}

.bottomBanner {
    position:absolute;
    z-index: 1;
    bottom: 0px;
    width: 800px;
    height: 100px;
    margin:0px;
    padding:0px;
    background-color: rgba( 255, 255, 255, 0.4);
    }

.bottomBanner h2{
    font-family: 'rockwell_stdlight', Helvetica, Arial, sans-serif;
    font-weight: lighter;
    color: #4B4D4E;
    font-size: 36px;
    padding-left: 170px;
}

.listBg{
    background:url(../images/herringbone-pattern.png);
    background-repeat: repeat;
}

Answer 1

看起来您的 <script> block 嵌套不正确。我尝试了您的代码，并能够通过将 unslider() 实例化的 javascript 移出“横幅”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>

        <ul>
            <li class="listBg"><h3>Slide 1</h3></li>
            <li class="listBg"><h3>Slide 2</h3></li>
            <li class="listBg"><h3>Slide 3</h3></li>
        </ul>
    </div>

</div> 

<script type="text/javascript">
    var unslider = $('.banner').unslider();

    $('.unslider-arrow').click(function() {
        var fn = this.className.split(' ')[1];

        //  Either do unslider.data('unslider').next() or .prev() depending on the className
        unslider.data('unslider')[fn]();
    });
</script>