具有动态轮播的 jQuery 滑块

Question

我创建了一个自定义 jQuery 滑块，它具有轮播，其 ul 宽度是从 li 动态设置的。

我在主体上放置了一个具有 #bgWrapper 的 div id，点击轮播 li 缩略图 我在 li 的 rel 图像上使用 #bgWrapper 更改了主体背景图像。喜欢 li rel="images/bgimage/bgone.jpg"

我想更改正文背景图像作为轮播的缩略图顺序点击下一个/上一个箭头。

这是我的 jQuery 代码：

$(document).ready(function () {

    //Variable Define
    var thumbWrap = $("ul#carousel");
    var thumb = $("ul#carousel>li");
    var slider = $(".sliderCont");
    var ltarrow = $(".leftArrow");
    var rtarrow = $(".rightArrow");
    var ulwidth = 0;
    var bgImg = $("#bgWrapper");



    //Remove last LI margin for set UL perfect width
    $("ul#carousel>li:last-child").css("width", "200px");



    //UL width from LI
    thumb.each(function () {
        ulwidth += $(this).width()
    });
    thumbWrap.width(ulwidth);



    //Use same LI width value on scrollLeft:
    ltarrow.click(function () {
        slider.animate({
            scrollLeft: "-=225px"
        }, {
            duration: "slow",
            easing: "easeInOutQuint"
        });
    });

    rtarrow.click(function () {
        slider.animate({
            scrollLeft: "+=225px"
        }, {
            duration: "slow",
            easing: "easeInOutQuint"
        });
    });



    //BG Image Change reflect as relation of LI
    bgImg.css("background-image", "url(images/bgimage/bgone.jpg)");
    thumb.click(function () {
        bgImg.css("background-image", "url('" + $(this).attr('rel') + "')");
    });


});

这是演示网址链接。 http://jsfiddle.net/NwmLL/1/
更新链接 http://jsfiddle.net/NwmLL/2/ 只需在 li 上添加和删除一个类 .liSelect 即可知道选择了哪个 li。

我解决了，通过网址http://jsfiddle.net/NwmLL/3/

Answer 1

查看演示jsFiddle

希望对你有用。