0

Easy Slider プラグイン ( http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding )を使用して、いくつかのリストをスクロールしています。プラグインは、リストのコントロールを動的に生成します。したがって、2 組のコントロールが表示されます。コントロールを単一のセットにバインドできるかどうか疑問に思っていました。単一のコントロールで両方のリストを同時にスライド/スクロールしたいと思います。私がこれを行っている理由は、ラッパー内の「機能」div と同時にスクロールしたい 100% 幅の背景があります。レイアウト/cssはうまく機能しています.jsを操作するだけです.

関数

<script>
        $(document).ready(function(){
            $("#slides, #slideTop").easySlider({
                auto: true,
                continuous: true,
                numeric: true
            });
        });
</script>

HTML

<div id="slides">
<ul>
<li class="slideOne"></li>
<li class="slideTwo"></li>
<li class="slideThree"></li>
</ul>
</div>

<div class="container_16">
<div class="grid_16">
<div id="slideTop">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>

CSS

#slideTop{
    width:940px;
    height: 350px;
    background-color: #ccc;
    position: absolute;
    z-index: 9999;
    overflow: hidden;
}

#slides{
    width:100%;
    height: 350px;
    background-color: blue;
    margin: 0 auto;
    position: absolute;
    top:144px;
    z-index: -9999;
    overflow: hidden;

}


#slideTop ul {
    padding:0;
    width: 940px;
    height: 350px;
}

#slideTop ul li {
    height:350px;
    list-style:none;
    width: 940px;
}

#slides ul {
    margin: 0 auto;
    padding:0;
    width: 100%;
    height: 350px;
}

#slides ul li {
    margin:0;
    padding:0;
    height:350px;
    list-style:none;
    width:4000px;
    float: left;
}

.slideOne {
    background: url(images/one.gif) repeat-x;
    width: 100%;
    height: 350px;
}

.slideTwo {
    background: url(images/two.gif) repeat-x;
        width: 100%;
    height: 350px;
}

.slideThree {
    background: url(images/three.gif) repeat-x;
        width: 100%;
    height: 350px;
}

ul#controls {
    height:21px;
    padding:0;
    width:100px;
    position:absolute;
    z-index:500;
    top:620px;
    float:left;
    margin-left:430px
}

ul#controls li {
    float:left;
    height:21px;
    list-style-type:none;
    margin:0;
    padding:0 3px;
    width:21px
}

ul#controls li a {
    background:url(images/ss.png) no-repeat 0 0;
    display:block;
    float:left;
    height:21px;
    width:21px;
    border:none
}
4

0 に答える 0