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

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.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