Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
barboss98
0 / 0 / 0
Регистрация: 31.01.2014
Сообщений: 10
#1

Cмена картинок при нажатии и отпускании кнопки - JavaScript

19.04.2015, 17:07. Просмотров 432. Ответов 7
Метки нет (Все метки)

Здравствуйте! Помогите со сменой картинок при нажатии и отпускании кнопки мыши. В имеющемся коде имеются три картинки: при нажатии и отпускании кнопки меняется одна, а нужно что бы при нажатии первая сменялась второй, а при отпускании вторая сменялась третьей. Проще говоря кнопка старт-стоп в авто. тестовая страница: http://dechip.ru/test.html
HTML5
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
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #image_list > div {
                display: none; /* Скрываем все слои */
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#image_list > div').first().show(); //Показывем 1-ый слой
 
                $('#image_list > div > img').click(function() { //При клике на кнопку...
                    var ths = $(this).parent('div').hide(); //находим родительский слой кнопки и скрываем его
                    $(ths).next('div').show(); //находим следующий за ним слой и показываем его
                    if($('#image_list').children('div:visible').length == 0) //если видимых слоев нет
                        $('#image_list > div').first().show(); //показываем первый слой в списке
                });
            });
        </script>    
    </head>
    <body>                
 
        <div id="image_list">
 
            <div class="slide">
                <img src="http://dechip.ru/foto/start1.png" alt=""/>
                
            </div>
 
            <div class="slide">
               <img src="http://dechip.ru/foto/start2.png" alt=""/>
                
            </div>
 
            <div class="slide">
                <img src="http://dechip.ru/foto/start3.png" alt=""/>
                
            </div>
            <div class="slide">
                <img src="http://dechip.ru/foto/start2.png" alt=""/>
                
            </div>
 
        </div>
 
    </body>
</html>

http://www.cyberforum.ru/javascript/thread1065779.html
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.04.2015, 17:07
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Cмена картинок при нажатии и отпускании кнопки (JavaScript):

Смена картинок при нажатии
помогите сделать так что бы при нажатии на картинку она переходила на другой...

Скрипт плавной смены картинок при нажатии
Добрый народ! Помогите! Нужен скрипт, который бы плавно сменял изображения...

При первом нажатии кнопки - выполнялся один код,при повторном другой и тд
Имеется код : document.onkeydown = function(z) { if (z.keyCode==&quot;120&quot;)...

Изменить цвет кнопки при нажатии и удержании этого цвета даже при обновлениях страницы
Здравствуйте, все никак не получается сделать несколько кнопок одного цвета,...

Открытие ссылки при нажатии кнопки
Привет! Подскажите, плиз, как сделать, чтобы по нажатию кнопки ссылка сразу...

7
kalabuni
Нарушитель
3170 / 2519 / 604
Регистрация: 18.04.2012
Сообщений: 7,624
19.04.2015, 17:46 #2
barboss98, имеем 3 картинки
изначально - 1.jpg
нажали -- 2.jpg
отпустили -- 3.jpg

спрашивается, что надо будет показывать при последующем нажатии -- 1.jpg или 2.jpg?

и зачем какие-то "слои", если можно примитивно менять src у тега <img>?
0
barboss98
0 / 0 / 0
Регистрация: 31.01.2014
Сообщений: 10
19.04.2015, 18:01  [ТС] #3
при следующем нажатии 2jpg-1jpg и обратно
код честно стырил ввиду собственной бестолковости.
0
kalabuni
Нарушитель
3170 / 2519 / 604
Регистрация: 18.04.2012
Сообщений: 7,624
19.04.2015, 18:04 #4
конкретно спрашиваю - 1 или 2?
вы отвечаете 2-1
0
barboss98
0 / 0 / 0
Регистрация: 31.01.2014
Сообщений: 10
19.04.2015, 18:06  [ТС] #5
смена картинок идет циклично 1-2-3-2-1-2-3-2-1 от первой к третьей и от третьей к первой как на тестовой странице
0
akiam
0 / 0 / 3
Регистрация: 29.01.2013
Сообщений: 39
19.04.2015, 23:28 #6
а что на счет цикла(или условий?) и простого setAttribute?
0
Lazy_Den
2912 / 2592 / 1306
Регистрация: 15.01.2014
Сообщений: 5,683
19.04.2015, 23:52 #7
barboss98, если я правильно понял вашу задачу, то смотрите такой вариант:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function () {
    var slide = $('#image_list .slide'),
        alt = false;
    
    slide.first().show();
    
    slide.on({
        mousedown: function(){
            slide.hide();
            slide.eq(1).show();
        },
        mouseup: function(){
            $(this).hide();
            slide.eq(alt ? 0 : 2).show();
            alt= !alt;
        }
    });
});
Добавлено через 2 минуты
Обратите внимание, что на странице у вас четыре изображения, а в моём примере - только три.
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="image_list">
    <div class="slide">
        <img src="http://dechip.ru/foto/start1.png" alt="" />
    </div>
    <div class="slide">
        <img src="http://dechip.ru/foto/start2.png" alt="" />
    </div>
    <div class="slide">
        <img src="http://dechip.ru/foto/start3.png" alt="" />
    </div>
</div>
0
barboss98
0 / 0 / 0
Регистрация: 31.01.2014
Сообщений: 10
20.04.2015, 08:38  [ТС] #8
Lazy_Den, Спасибо огромное!!!
0
20.04.2015, 08:38
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.04.2015, 08:38
Привет! Вот еще темы с решениями:

Переход по ссылке при нажатии кнопки
Здравствуйте,помогите с ссылкой, вот в чём проблема при нажатие на кнопку...

Переадресация при нажатии кнопки вход
Помогите пожалуйста)нужно написать скрипт, который при нажатии вход будут...

Вставить картинку при нажатии кнопки
Здравствуйте, есть куча кнопок в коде. Нужно сделать так, чтобы при нажатии на...

Отображение div'a при нажатии кнопки
Суть вот в чём. Есть кнопка,при нажатии на неё должен выводиться блок(div) и...


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

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

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