Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
1

Смена картинок вперёд/назад

14.07.2014, 23:45. Просмотров 1288. Ответов 4
Метки нет (Все метки)

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

Скрипт должен отрабатывать по клику вперёд но ничего не происходит, ошибок тоже нет

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div id="small-6 columns slider">
                        <img src="http://placehold.it/940x528" alt="">
                        <img src="http://placehold.it/940x528" alt="">
                        <img src="http://placehold.it/940x528" alt="">
                        <img src="http://placehold.it/940x528" alt="">
                        <img src="http://placehold.it/940x528" alt="">
                    </div>
                    <div class="center">
                        <a class="prev_item" href="#">
                            <img src="<?php echo $config->urls->templates?>img/large/page_left.png" alt=""/>
                        </a>
                        <a class="next_item" href="#">
                            <img src="<?php echo $config->urls->templates?>img/large/page_right.png" alt=""/>
                        </a>
                    </div>

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$(function(){
 
        // скроем изображдения  в начале
 
        $('.slider img').hide();
 
        // выберем первое изображение как стартовое
 
        var select= $('.slider img:eq(0)');
 
        //покажем первую картинку
 
        select.show();
 
        // вместо кнопок использую само изобюражения
 
        $('.next_item').click(function(){
 
            //скроем текущее изображение
 
            select.hide();
 
            //выберем следующее изображение
 
            select=select.next();
 
            //если следующего изображения нет (ну нету, кончились они :) ), тогда выберем вновь первое изображение
 
            if (select.attr("src")==undefined){
 
                select = $('.slider img:eq(0)');
 
            };
 
            //покажем вновь выбранное изображение.
 
            select.show();
 
        });
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.07.2014, 23:45
Ответы с готовыми решениями:

Смена картинок.
Например есть 2 картинки &lt;div class=&quot;item&quot; id=&quot;i1&quot;&gt; &lt;a href=&quot;#&quot;&gt;&lt;img...

Смена картинок по клике
Ув. форумчане , хочу написать в jquery скрипт по смены картинок когда кликаешь по кнопкам на право...

Смена картинок стрелками
Здравствуйте, подскажите как сделать или где прочитать, нужен эффект как конвейера, то есть есть у...

Смена картинок фона
Здравствуйте! Нужно осуществить плавную смену фона с одной картинки на другую. &lt;!DOCTYPE...

4
80 / 80 / 53
Регистрация: 22.03.2013
Сообщений: 265
15.07.2014, 06:53 2
здесь у вас:
Javascript
1
2
3
        // скроем изображдения  в начале
 
        $('.slider img').hide();
выбирается тег img в элементе с классом slider, но в html у вас почему то есть такой странный id:
HTML5
1
<div id="small-6 columns slider">
это не правильно, вы должно бьть хотели написать:
HTML5
1
<div class="small-6 columns slider">
1
странник
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
15.07.2014, 08:18 3
Цитата Сообщение от sendxt Посмотреть сообщение
Скрипт должен отрабатывать по клику вперёд но ничего не происходит, ошибок тоже нет
может быть как раз все происходит? просто у вас в слайдере все картинки одинаковые, поэтому и не видите их смену.

и с id замечание также верное.
1
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
15.07.2014, 10:15  [ТС] 4
Donald28, и в правду работал не заметно этого было что одинаковые картинки=)) в диспетчер посмотрел убедился )

massEffect, да и вправду там класс должен быть, как так id туда запихнул и не замечал)

Добавлено через 9 минут
как сделать чтобы кнопка prev если 1 картинка выбрана на данный момент и мы нажимаем на неё она включает последнию в другую в общем сторону, сейчас она работает только если сделать шаг вперёд тогда можно шаг назад

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
$(function(){
 
        // скроем изображдения  в начале
 
        $('.slider img').hide();
 
        // выберем первое изображение как стартовое
 
        var select= $('.slider img:eq(0)');
 
        //покажем первую картинку
 
        select.show();
 
        // вместо кнопок использую само изобюражения
 
        $('.next_item').click(function(){
 
            //скроем текущее изображение
 
            select.hide();
 
            //выберем следующее изображение
 
            select=select.next();
 
            //если следующего изображения нет (ну нету, кончились они :) ), тогда выберем вновь первое изображение
 
            if (select.attr("src")==undefined){
 
                select = $('.slider img:eq(0)');
 
            };
 
            //покажем вновь выбранное изображение.
 
            select.show();
 
 
            return false;
 
        });
 
        $('.prev_item').click(function(){
 
            //скроем текущее изображение
 
            select.hide();
 
            //выберем следующее изображение
 
            select=select.prev();
 
            //если следующего изображения нет (ну нету, кончились они :) ), тогда выберем вновь первое изображение
 
            if (select.attr("src")==undefined){
 
                select = $('.slider img:eq(0)');
 
            };
 
            //покажем вновь выбранное изображение.
 
            select.show();
 
 
            return false;
 
        });
 
 
    });
0
странник
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
15.07.2014, 10:18 5
58 строка:
Javascript
1
select = $('.slider img:last-child');
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
15.07.2014, 10:18

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Смена картинок по клику
Здравствуйте, нужна помощь! Мне нужно чтоб при нажатии на див картинка менялась: 1.jpg - 2.jpg -...

Смена картинок при клике
Доброго всем времени суток. У меня есть ряд небольших картинок, и те же самые картинки только...

Смена картинок при клике
Нужно простой слайдер )) Есть три картинки по очереди . при клике preview показалось предыдущая...

Смена картинок в галерее по кнопке
не могу реалиовать смену картинки по кнопке вот код &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; JQuery &lt;/TITLE&gt; ...


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

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

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