修改 jQuery 滑块以从不同位置开始

Question

我正在使用从另一个 SO 帖子中获得的滑块 - 原始小提琴是 here。我对 jQuery 还是很陌生。

我已经想出了如何阻止它自动播放，但我想知道是否有办法修改代码，使其在不同于 1 的幻灯片上开始？我收到了在第二张幻灯片上启动它而不删除第一张幻灯片的请求。

这不是像 WowSlider 之类的插件或类似的插件，只是从这个网站上一个很棒的人那里得到代码。这是我的 jQuery 和 here is a fiddle 的所有内容。

            var thumbs = $('ul.thumbHolder li');var bigImgs = $('ul.imgHolder li');
            var mask = $('.imgHolder');
            var imgW = $('ul.imgHolder li').width();
            var speed = 300;

            thumbs.removeClass('selected').first().addClass('selected');

            thumbs.click(function () {
                var target = $(this).index();

                mask.animate({
                    'left': '-' + imgW * target + 'px'
                }, speed);


                thumbs.removeClass('selected');
                $(this).addClass('selected');
            });


            $('.Bleft').on('click', function () {
                var i = $('ul.thumbHolder li.selected').index();
                i--;

                $('ul.thumbHolder li.selected').removeClass('selected');
                thumbs.eq(i).addClass('selected');

                if (i === -1) {
                    mask.animate({
                        'left': '-' + imgW * $('ul.thumbHolder li').index() + 'px'
                    }, speed);
                } else {
                    mask.animate({
                        'left': '-' + imgW * i + 'px'
                    }, speed);
                }
                clearInterval(counter);
            });
            $('.Bright').on('click', function () {
                var i = $('ul.thumbHolder li.selected').index();
                i = i >= thumbs.length - 1 ? 0 : i + 1;

                $('ul.thumbHolder li.selected').removeClass('selected');
                thumbs.eq(i).addClass('selected');

                mask.animate({
                    'left': '-' + imgW * i + 'px'
                }, speed);
                clearInterval(counter);
            });
            var count = 0;
            var counter = window.setInterval(timer, 5000);

            function timer() {
                count = count + 0;
                if (count >= 0) {
                    count = 0;
                    return;
                }
                mask.animate({
                    'left': '-' + imgW * count + 'px'
                }, speed);
                thumbs.removeClass('selected');
                thumbs.eq(count).addClass('selected');
            }

提前感谢您的帮助！

Answer 1

将此代码放在var counter = window.setInterval(timer, 5000);这一行的下方

thumbs.removeClass('selected').eq(1).addClass('selected');// the 1 is the zero-index of the li tag (the li is the image holder)
mask.animate({
    'left': '-' + imgW * 1 + 'px'// the 1 is the zero-index of the li tag
}, 0);// will place image in correct position in 0 milliseconds = no animation at start

Answer 2

例如，如果你想从第二张幻灯片开始，你必须替换它：

thumbs.removeClass('selected').first().addClass('selected');

用这个：

thumbs.removeClass('selected').eq(1).addClass('selected');

诀窍是通过选择 "thumbs" == "$('ul.thumbHolder li');" 从 1 到 5 中选择包含图片的元素的位置选择器。这个 ul 中有 5 个 li 元素，所以 function eq(x) 可以让你选择 xnd 元素，尽管你想要的图片。