0

我正在使用 Easy Slider 插件（http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding）来滚动几个列表。该插件动态生成列表的控件。所以出现了两组控件。我想知道是否可以将控件绑定到一个集合中。我希望单个控件同时滑动/滚动两个列表。我这样做的原因是我有 100% 宽度的背景，我想与包装器内的“功能”div 同时滚动。布局/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