Question

我不知道jquery足以解决这个问题。另外，我不喜欢互联网上提供的选项。我喜欢简单的事情。

我有一个简单的div幻灯片/滚动条使用循环但我想让缩略图控制内容。

我认为我从这里的链接尝试做的事情非常明显......

http://jsfiddle.net/TacoFiesta/amxburh8/7/

感谢您的帮助

var divs = $('div[id^="slide-"]').hide(),
    i = 0;

function cycle() {
    divs.eq(i).fadeIn(400)
        .delay(7000)
        .fadeOut(400, cycle);
    i = ++i % divs.length;
}
$('#next').click(function () {
    divs.stop(true).hide();
    cycle();
});

$('#prev').click(function () {
    divs.stop(true).hide();
    i = (i - 2 + divs.length) % divs.length;
    cycle();
});
cycle();

Answer 1

我完全重构了代码。如果我错过了这个要求，我很抱歉。但我认为它应该按如下方式创建。

请查看[小提琴] ：http://jsfiddle.net/passionintellectual/5zqvnr3y/

Javascript代码：

var sliderBuilder = function (container,i) {
    var index = i;
    var timeoutfunction;
    var timeouts = [];
    var adjustIndex = function () {
        console.log('before' + index);
        var divs = $(container + ' div[id^="slide-"]');
        if (index === undefined ) {
            index = 1;
        }
        else if( index < 1){
            index =  divs.length - index;
        }
        else if (index > divs.length) {
            index = index - divs.length;
        }
        console.log('after' + index);
    };
    var x = function () {
        console.log('-------');
        var obj = this;

        adjustIndex();
        $(container + ' div[id^="slide-"]').hide();
        $(container + ' #slide-' + index).fadeIn(400);

        this.runAuto = function () {
            if (timeoutfunction === undefined) {
                timoutfunction = setTimeout(function a() {
                    index++;
                    x();
                    timoutfunction = setTimeout(a, 1000);
                }, 300);
            }

            return x();
        };
        this.stopAuto = function () {
            clearTimeout(timoutfunction);
        };
        this.setIndex = function (k) {
            index = parseInt(k, 10);
            return x();
        };

        this.previous = function () {
            index--;
            return x();
        };

        this.next = function () {

            index++;
            return x();
        };

        return this;
    };
    return x;
};

var sliderBuilder1 = new sliderBuilder('#slideshow1', 1);
slider = sliderBuilder1().runAuto();


$('.thumb a').click(function (e) {
    e.preventDefault();
    var id = $(this).attr('id');
    var val = id.split("-")[1];
    console.log(id);
    if (val) {
        k = parseInt(val, 10);
    }
    slider.setIndex(k).stopAuto();
});

$('#prev a').click(function (e) {
    e.preventDefault();
    slider.previous().stopAuto();
});
$('#next a').click(function (e) {
    e.preventDefault();
    slider.next().stopAuto();
});

HTML代码：

<div id="slideshow1" class="row">
    <div id="slidenav">
        <div id="prev"><a href="#">Previous</a>

        </div>
        <div id="next"><a href="#">Next</a>

        </div>
    </div>
    <div id="slide-1" class="slide">content text goes here content text goes here</div>
    <div id="slide-2" class="slide">content text goes here content text goes here</div>
    <div id="slide-3" class="slide">content text goes here content text goes here</div>
    <div id="slide-4" class="slide">content text goes here content text goes here</div>
</div>
<div class="thumb"><a href="#" class="thumblink" id="thumb-1"></a>

</div>
<div class="thumb"><a href="#" class="thumblink" id="thumb-2"></a>

</div>
<div class="thumb"><a href="#" class="thumblink" id="thumb-3"></a>

</div>
<div class="thumb"><a href="#" class="thumblink" id="thumb-4"></a>

</div>
<br/>

CSS代码：

.slide {
    display: block;
    height: 250px;
    color:#fff;
}
#slide-1 {
    background:#000;
}
#slide-2 {
    background:#F00;
}
#slide-3 {
    background:#F36;
}
#slide-4 {
    background:#CCC;
}
.thumb {
    float:left;
    margin:10px 0 0 10px;
}
.thumblink {
    display:block;
    height: 100px;
    width:100px;
}
#thumb-1 {
    background:#000;
}
#thumb-2 {
    background:#F00;
}
#thumb-3 {
    background:#F36;
}
#thumb-4 {
    background:#CCC;
}

用缩略图控制Div循环

1 个答案: