Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
koderman
2 / 2 / 0
Регистрация: 27.11.2012
Сообщений: 131
1

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

12.02.2014, 22:18. Просмотров 1047. Ответов 24
Метки нет (Все метки)

Как написать код на ЧИСТОМ 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*/
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.02.2014, 22:18
Ответы с готовыми решениями:

Слайдшоу на jquery
Всем день добрый (вечер, ночь, утро). Наставьте на путь истинный люди добрые. ...

Подправить отображение ссылок пагинации на jquery (слайдшоу)
http://1.helpdelphi.ru/11/indexx.html внизу есть круглишки как их поднять...

Как создать слайдшоу на jquery с чтением каталога изображений
Здравствуйте! У меня есть небольшое слайд шоу на сайте, и все изображения...

Аналог кода Jquery на чистом javascript
Ребят как написать на javascript эту функцию $(document).ready(function(){...

Избавляемся от jquery и пишем все на чистом JavaScript
Сделал велосипед, В переменной data, хранится html блок: <div> ...

24
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
12.02.2014, 23:41 2
Цитата Сообщение от 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()
1
koderman
2 / 2 / 0
Регистрация: 27.11.2012
Сообщений: 131
12.02.2014, 23:54  [ТС] 3
Я просто сейчас учу Jquery и хотелось посмотреть как это делается с применением конструкции $(this)
У вас тоже классный пример конечно, но ещё не в той области материала который я учу сейчас.
0
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
13.02.2014, 00:21 4
Цитата Сообщение от koderman Посмотреть сообщение
как это делается с применением конструкции $(this)
Так я вас разочаровал? Если очень образно, то $(this)[0] == this или даже $("#elem_id")[0] == document.getElementById("elem_id"), а нужен $(this), когда вы собираетесь работать с объектом jQuery, т.е. иметь возможность применять к нему методы jQuery.
1
koderman
2 / 2 / 0
Регистрация: 27.11.2012
Сообщений: 131
13.02.2014, 00:35  [ТС] 5
Нет конечно)) Классный код. Но я сейчас учу коды с применением этого $(this)
Второй день не могу сделать такую конструкцию.
Вот так получилось http://jsfiddle.net/AmNJ8/
А как я описывал не получилось.
0
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
13.02.2014, 00:47 6
Цитата Сообщение от koderman Посмотреть сообщение
А как я описывал не получилось.
То есть, вы хотите, чтоб в месте клика появлялась рендомная картинка? Судя по описанию в первом посте это так, но может я не так понимаю вас.
1
koderman
2 / 2 / 0
Регистрация: 27.11.2012
Сообщений: 131
13.02.2014, 01:02  [ТС] 7
Правильно. Вы всё правильно здесь сделали 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
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
13.02.2014, 01:13 8
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
    }); // сдвинем картинки лестничкой
});
1
koderman
2 / 2 / 0
Регистрация: 27.11.2012
Сообщений: 131
13.02.2014, 01:19  [ТС] 9
Я так себе это и представлял. 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/

Только один раз срабатывает.
0
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
13.02.2014, 01:23 10
Цитата Сообщение от koderman Посмотреть сообщение
each() создаёт цикл $(this) означает текущий элемент массива.
Правильно.
Цитата Сообщение от koderman Посмотреть сообщение
Этот код совсем безнадёжен да?
Ну, как бы да По крайней мере, я что-то не припомню, чтоб его применяли в слайдшоу. Хотя... всё может быть.
1
koderman
2 / 2 / 0
Регистрация: 27.11.2012
Сообщений: 131
13.02.2014, 01:31  [ТС] 11
мне слайдшоу даже не важно. Я учу Jquery. Может доработать можно этот код как нибудь?
0
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
13.02.2014, 01:33 12
Цитата Сообщение от koderman Посмотреть сообщение
Может доработать можно этот код как нибудь?
Тогда объясните, что должно происходить и какой результат должен быть в итоге.
1
koderman
2 / 2 / 0
Регистрация: 27.11.2012
Сообщений: 131
13.02.2014, 01:36  [ТС] 13
Результат такой http://jsfiddle.net/Deonis/8N4Dj/1/
Каркас такой http://jsfiddle.net/73t5k/
0
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
13.02.2014, 01:41 14
Ну, не знаю. Может такой вариант подойдет (в примере кликаем по основному смайлу)? А то я уже теряюсь в догадках
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;
});
1
koderman
2 / 2 / 0
Регистрация: 27.11.2012
Сообщений: 131
13.02.2014, 01:47  [ТС] 15
Круто уже. А получится без if?
if можно ведь методом each() заменить?
Вообще шикарно было бы.
each() как раз ведь создан для создания циклов.
Вот зачем эти счётчики писать не понимаю когда each() есть?
0
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
13.02.2014, 01:58 16
Лучший ответ Сообщение было отмечено koderman как решение

Решение

Цитата Сообщение от 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++;
});
1
koderman
2 / 2 / 0
Регистрация: 27.11.2012
Сообщений: 131
13.02.2014, 02:03  [ТС] 17
each() не по кругу перебирает элементы массива, а с первого по последний и останавливается?
0
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
13.02.2014, 02:04 18
Лучший ответ Сообщение было отмечено koderman как решение

Решение

Цитата Сообщение от koderman Посмотреть сообщение
each() не по кругу перебирает элементы массива, а с первого по последний и останавливается?
Да. Ну, я ж вам приводил аналогию с циклом for
1
koderman
2 / 2 / 0
Регистрация: 27.11.2012
Сообщений: 131
13.02.2014, 02:19  [ТС] 19
Ага. Спасибо)
Ясно. Тогда пару вопросов ещё и я пошёл дальше учить.

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

И что это условие означает if(i == k)? Длина массива ведь свойством length находится.
0
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
13.02.2014, 02:26 20
i - это индекс текущего элемента в цикле. Как мне выбрать очередной элемент? Вот для этого я использую счетчик k. Изначально k = 0; > кликнули > бежим, пока нам не встретится элемент с таким индексом > нашли, вывели > за циклом инкремент k > и возвращаемся к пункту "кликнули".
Поэтому я и намекал, что цикл тут абсолютно не нужен. При каждом клике мы снова и снова его шерстим, когда проще сразу взять нужный элемент.
1
13.02.2014, 02:26
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.02.2014, 02:26

Аналог .on(jquery) на чистом js
Нужно обрабатывать клики по динамическому контенту с атрибутами...

Многоуровневое меню на чистом js без jquery
учил я жаву скрипт на кодакадеми и джиквери и окахалось что совсем его не знаю,...

Слайдшоу
Здравствуйте, подскажите как можно сделать подобное слайдшоу...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru