1

我是 jquery 的新手..我想制作一个 scrollLeft 滑动画廊..我做了以下一点..bt 它只滑动一次..它不会连续滑动...我还想突出显示当前正在滑动的幻灯片。 .我该怎么做..有人可以帮帮我吗？

$(function(){
    var $thumbs= $('div.thumbs_wrapper');
    var scrollWidth= $('ul.thumbs li').width();
    var $single_Item=$('ul.thumbs li:first');

    singleWidth= $single_Item.outerWidth(); 
    scrollRight = singleWidth;      

    setInterval(function(){
        sliding();
    }, 1000);

});

function sliding(n){
    var $thumbs= $('div.thumbs_wrapper');
    var scrollWidth= $('ul.thumbs li').width();
    $thumbs.animate({'scrollLeft':'+=' + singleWidth}, 'slow').scrollLeft(scrollWidth-scrollRight);
    $('thumbs li a').each(function(){
        $(this).removeClass('active');
        if($(this).hasClass('imgage'+integer)){
            $(this).addClass('active');
        }
    });
}

这是我的 html 代码

<div class=gallery_outer>
    <div class="gallery_inner">
        <ul class="full_img">
            <li><img src="fullSize_image/1.jpg"/></li>
            <li><img src="fullSize_image/2.jpg"/></li>
            <li><img src="fullSize_image/3.jpg"/></li>
            <li><img src="fullSize_image/4.jpg"/></li>
            <li><img src="fullSize_image/5.jpg"/></li>
            <li><img src="fullSize_image/6.jpg"/></li>
        </ul>
    </div>
    <div class="thumbs_wrapper">        
        <ul class="thumbs">
            <li><img src="thumbnails/1.jpg" class="image1"/></li>
            <li><img src="thumbnails/2.jpg" class="image2"/></li>
            <li><img src="thumbnails/3.jpg" class="image3"/></li>
            <li><img src="thumbnails/4.jpg" class="image4"/></li>
            <li><img src="thumbnails/5.jpg" class="image5"/></li>
            <li><img src="thumbnails/6.jpg" class="image6"/></li>
        </ul>
    </div>
</div>

这是我的 CSS 代码

.gallery_outer{
    margin:15px;
    width:390px;
    height:430px;
    border:5px solid #aaa;
    border-radius:10px;
    webkit-border-radius:10px;
    box-shadow:2px 2px 5px 3px;
    -moz-box-shadow:2px 2px 5px 3px;
    webkit-box-shadow:2px 2px 5px 3px;

}
.gallery_inner{

}
.full_img{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    height:282px;
    width:17296px;
    overflow: hidden;
    /*left:-384px;*/
}
.full_img li{
    display:inline;
    float:left;
    margin-left:0 !important;
    padding:9px 8px;
    position: absolute;
    width:376px;
    height:282px;
}
.full_img li img{
    width:376px;
}
.thumbs_wrapper{
    margin:0;
    padding:0;
    height:108px;
    width:324px;
    overflow:hidden;
    float:left;
}
.thumbs{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    /*width:5336px;*/
    width:668px;
    /*left:-108px;*/
}
.thumbs li{
    display:inline;
    float:left;
    margin-left:0 !important;
    padding:9px 8px;
    width:100px;
    height:100px;
}
.thumbs li img{
    width:100px;
    height:100px;
    cursor:pointer;
}
.active{
    border:5px solid red;
}
4

1 回答 1

0

这是我能来的最接近的，我不知道你对活动位的看法，它没有多大意义，所以我没有包括它。如果你能解释你的想法是什么，我可以尝试修改我的答案以满足你的需要。

于 2012-05-22T01:39:34.020 回答