Слайдшоу на чистом 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 > и возвращаемся к пункту "кликнули".
Поэтому я и намекал, что цикл тут абсолютно не нужен. При каждом клике мы снова и снова его шерстим, когда проще сразу взять нужный элемент.

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

Слайдшоу на чистом 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