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元素，尽管你想要的是图片。

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

2 个答案: