Слайдшоу на чистом Jquery

@koderman · Регистрация: 27.11.2012

Студворк — интернет-сервис помощи студентам

Как написать код на ЧИСТОМ Jquery.
Когда кликаю на картинку надо чтобы на этом месте куда кликаю появлялись другие картинки.
Второй день не могу сделать.
На яваскрипте я знаю как сделать. Нужно на чистом Jquery сделать.

JavaScript
1
$("#hier img").click(function () {$("#hier img").attr("src" , ЗДЕСЬ наверное нужно вставить то что будет перебирать адреса массива в котором находятся другие картинки);});

Добавлено через 12 минут
Чувствую решение в методе each()
Но не могу никак реализовать это.

Добавлено через 5 минут
Соорудил такую конструкцию сложную, но она только один раз меняет картинку

JavaScript
1
2
$("#hier").click(function () {$("#eto img").each(function (){
    $("#hier img").attr("src" , $(this).attr("src")); }/* function 2*/ );/*each*/   } /*function 1*/   );/*click*/

@Lazy_Den · 12.02.2014, 23:41

Сообщение от koderman

на ЧИСТОМ Jquery

Улыбнуло

Обычно говорят: "На чистом JS", но такое я первый раз вижу.

Сообщение от koderman

Когда кликаю на картинку надо чтобы на этом месте куда кликаю появлялись другие картинки.

Если это весь функционал, который вам нужен, то вот примерчик.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="slide_block">
    <div class="slides">
        <img src="http://placehold.it/200x200/&text=2" alt="" />
        <img src="http://placehold.it/200x200/&text=3" alt="" />
        <img src="http://placehold.it/200x200/&text=4" alt="" />
        <img src="http://placehold.it/200x200/&text=5" alt="" />
        <img src="http://placehold.it/200x200/&text=6" alt="" />
        <img src="http://placehold.it/200x200/&text=7" alt="" />
        <img src="http://placehold.it/200x200/&text=8" alt="" />
        <img src="http://placehold.it/200x200/&text=9" alt="" />        
        <img src="http://placehold.it/200x200/&text=1" alt="" />        
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
.slides {
    position: relative;
    cursor: pointer;
}
.slides img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript
1
2
3
4
5
6
7
var slides = $('.slides');
$('.slide_block').click(function(){
    var next = slides.children().first().finish();
    next.hide();
    next.appendTo(slides);
    next.fadeIn(300);        
});

Как видите - никаких .each()

@koderman · 12.02.2014, 23:54 **[ТС]**

Я просто сейчас учу Jquery и хотелось посмотреть как это делается с применением конструкции $(this)
У вас тоже классный пример конечно, но ещё не в той области материала который я учу сейчас.

@Lazy_Den · 13.02.2014, 00:21

Сообщение от koderman

как это делается с применением конструкции $(this)

Так я вас разочаровал?

Если очень образно, то $(this)[0] == this или даже $("#elem_id")[0] == document.getElementById("elem_id"), а нужен $(this), когда вы собираетесь работать с объектом jQuery, т.е. иметь возможность применять к нему методы jQuery.

@koderman · 13.02.2014, 00:35 **[ТС]**

Нет конечно)) Классный код. Но я сейчас учу коды с применением этого $(this)
Второй день не могу сделать такую конструкцию.
Вот так получилось http://jsfiddle.net/AmNJ8/
А как я описывал не получилось.

@Lazy_Den · 13.02.2014, 00:47

Сообщение от koderman

А как я описывал не получилось.

То есть, вы хотите, чтоб в месте клика появлялась рендомная картинка? Судя по описанию в первом посте это так, но может я не так понимаю вас.

@koderman · 13.02.2014, 01:02 **[ТС]**

Правильно. Вы всё правильно здесь сделали http://jsfiddle.net/Deonis/8N4Dj/1/
С точки зрения функциональности всё так как нужно.
Но я конструкции $(this) и each() учу сейчас. Пытался ими сделать цикл такой.
Получилось только вот так http://jsfiddle.net/AmNJ8/
А как у вас здесь не получилось http://jsfiddle.net/Deonis/8N4Dj/1/

Можете написать код с таким же фунционалом http://jsfiddle.net/Deonis/8N4Dj/1/ но с применением $(this) и если получится и с each() тоже?

@Lazy_Den · 13.02.2014, 01:13

each() - это не более чем цикл. К примеру, вы получили массив картинок $("#eto img"), то что вы сможете сделать с ним, используя обычный цикл for? Вот то же вы сможете делать, используя цикл each(). К примеру, вам надо каждой картинке из набора, задать один стиль или проверить её размер etc, в общем, пробежаться по всем этим элементам и произвести или не произвести какое-то действие.

JavaScript
1
2
3
4
5
6
7
8
9
$("#eto img").each(function(i, el){
    // $(el) == $(this) - можно использовать любой
    // i - индекс в массиве 
    $(el).css({
        display: 'block',
        marginLeft: 20 * i,
        marginTop: 20 * i
    }); // сдвинем картинки лестничкой
});

@koderman · 13.02.2014, 01:19 **[ТС]**

Я так себе это и представлял. each() создаёт цикл $(this) означает текущий элемент массива.

Этот код совсем безнадёжен да?

JavaScript
1
2
$("#hier").click(function () {$("#eto img").each(function (){
    $("#hier img").attr("src" , $(this).attr("src")); }/* function 2*/ );/*each*/   } /*function 1*/   );/*click*/

Я тут пытался применить эти each() и $(this)

Вот что получилось из этого http://jsfiddle.net/73t5k/

Вот на этом каркасе http://jsfiddle.net/73t5k/ я пытаюсь построить работающую конструкцию. С таким же функционалом как тут http://jsfiddle.net/Deonis/8N4Dj/1/

Только один раз срабатывает.

@Lazy_Den · 13.02.2014, 01:23

Сообщение от koderman

each() создаёт цикл $(this) означает текущий элемент массива.

Правильно.

Сообщение от koderman

Этот код совсем безнадёжен да?

Ну, как бы да

По крайней мере, я что-то не припомню, чтоб его применяли в слайдшоу. Хотя... всё может быть.

@koderman · 13.02.2014, 01:31 **[ТС]**

мне слайдшоу даже не важно. Я учу Jquery. Может доработать можно этот код как нибудь?

@Lazy_Den · 13.02.2014, 01:33

Сообщение от koderman

Может доработать можно этот код как нибудь?

Тогда объясните, что должно происходить и какой результат должен быть в итоге.

@koderman · 13.02.2014, 01:36 **[ТС]**

Результат такой http://jsfiddle.net/Deonis/8N4Dj/1/
Каркас такой http://jsfiddle.net/73t5k/

@Lazy_Den · 13.02.2014, 01:41

Ну, не знаю. Может такой вариант подойдет (в примере кликаем по основному смайлу)? А то я уже теряюсь в догадках

JavaScript
1
2
3
4
5
6
var small = $('#eto img'),
    i = 0;
$('#hier img').click(function () {
    $(this).attr('src' , small.eq(i++).attr('src'));
    if(i >= small.length) i = 0;
});

@koderman · 13.02.2014, 01:47 **[ТС]**

Круто уже. А получится без if?
if можно ведь методом each() заменить?
Вообще шикарно было бы.
each() как раз ведь создан для создания циклов.
Вот зачем эти счётчики писать не понимаю когда each() есть?

@Lazy_Den · 13.02.2014, 01:58

Сообщение от koderman

А получится без if?

Дык, это только для зацикливания, а без if, мы до конца массива дойдем и тормоза. Можно конечно и с использованием each() сделать, только никому не показывайте, а то побьют

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var small = $('#eto img'),
    k = 0;
$('#hier img').click(function () {
    var $that = $(this);
    small.each(function(i){
        if(i == k){
            $that.attr('src' , $(this).attr('src'));
        }
    });
    k++;
});

@koderman · 13.02.2014, 02:03 **[ТС]**

each() не по кругу перебирает элементы массива, а с первого по последний и останавливается?

@Lazy_Den · 13.02.2014, 02:04

Сообщение от koderman

each() не по кругу перебирает элементы массива, а с первого по последний и останавливается?

Да. Ну, я ж вам приводил аналогию с циклом for

@koderman · 13.02.2014, 02:19 **[ТС]**

Ага. Спасибо)
Ясно. Тогда пару вопросов ещё и я пошёл дальше учить.

Если each() проходит все элементы в цикле автоматически, то зачем делать условие ? if(i == k)

И что это условие означает if(i == k)? Длина массива ведь свойством length находится.

@Lazy_Den · 13.02.2014, 02:26

i - это индекс текущего элемента в цикле. Как мне выбрать очередной элемент? Вот для этого я использую счетчик k. Изначально k = 0; > кликнули > бежим, пока нам не встретится элемент с таким индексом > нашли, вывели > за циклом инкремент k > и возвращаемся к пункту "кликнули".
Поэтому я и намекал, что цикл тут абсолютно не нужен. При каждом клике мы снова и снова его шерстим, когда проще сразу взять нужный элемент.

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

Слайдшоу на чистом Jquery

Решение

Решение

@koderman 2 / 2 / 0 Регистрация: 27.11.2012 Сообщений: 131
	12.02.2014, 23:54 [ТС]
	Я просто сейчас учу Jquery и хотелось посмотреть как это делается с применением конструкции $(this) У вас тоже классный пример конечно, но ещё не в той области материала который я учу сейчас. 0

@koderman 2 / 2 / 0 Регистрация: 27.11.2012 Сообщений: 131
	13.02.2014, 00:35 [ТС]
	Нет конечно)) Классный код. Но я сейчас учу коды с применением этого $(this) Второй день не могу сделать такую конструкцию. Вот так получилось http://jsfiddle.net/AmNJ8/ А как я описывал не получилось. 0

@koderman 2 / 2 / 0 Регистрация: 27.11.2012 Сообщений: 131
	13.02.2014, 01:02 [ТС]
	Правильно. Вы всё правильно здесь сделали http://jsfiddle.net/Deonis/8N4Dj/1/ С точки зрения функциональности всё так как нужно. Но я конструкции $(this) и each() учу сейчас. Пытался ими сделать цикл такой. Получилось только вот так http://jsfiddle.net/AmNJ8/ А как у вас здесь не получилось http://jsfiddle.net/Deonis/8N4Dj/1/ Можете написать код с таким же фунционалом http://jsfiddle.net/Deonis/8N4Dj/1/ но с применением $(this) и если получится и с each() тоже? 0

@koderman 2 / 2 / 0 Регистрация: 27.11.2012 Сообщений: 131
	13.02.2014, 01:31 [ТС]
	мне слайдшоу даже не важно. Я учу Jquery. Может доработать можно этот код как нибудь? 0

@koderman 2 / 2 / 0 Регистрация: 27.11.2012 Сообщений: 131
	13.02.2014, 01:36 [ТС]
	Результат такой http://jsfiddle.net/Deonis/8N4Dj/1/ Каркас такой http://jsfiddle.net/73t5k/ 0

@koderman 2 / 2 / 0 Регистрация: 27.11.2012 Сообщений: 131
	13.02.2014, 01:47 [ТС]
	Круто уже. А получится без if? if можно ведь методом each() заменить? Вообще шикарно было бы. each() как раз ведь создан для создания циклов. Вот зачем эти счётчики писать не понимаю когда each() есть? 0

@koderman 2 / 2 / 0 Регистрация: 27.11.2012 Сообщений: 131
	13.02.2014, 02:03 [ТС]
	each() не по кругу перебирает элементы массива, а с первого по последний и останавливается? 0

@koderman 2 / 2 / 0 Регистрация: 27.11.2012 Сообщений: 131
	13.02.2014, 02:19 [ТС]
	Ага. Спасибо) Ясно. Тогда пару вопросов ещё и я пошёл дальше учить. Если each() проходит все элементы в цикле автоматически, то зачем делать условие ? if(i == k) И что это условие означает if(i == k)? Длина массива ведь свойством length находится. 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	13.02.2014, 02:26
	i - это индекс текущего элемента в цикле. Как мне выбрать очередной элемент? Вот для этого я использую счетчик k. Изначально k = 0; > кликнули > бежим, пока нам не встретится элемент с таким индексом > нашли, вывели > за циклом инкремент k > и возвращаемся к пункту "кликнули". Поэтому я и намекал, что цикл тут абсолютно не нужен. При каждом клике мы снова и снова его шерстим, когда проще сразу взять нужный элемент. 1