С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
WhizArt
0 / 0 / 0
Регистрация: 12.08.2011
Сообщений: 17
1

Непрерывная смена картинок

07.02.2013, 20:38. Просмотров 1117. Ответов 8
Метки нет (Все метки)

есть 4 картинки.
нужно сделать непрерывную смену картинок.
так же нужно сделать возможным переход к любой из них при клике соответствующей кнопки (нажали кнопку 3 - перешли на 3 картинку)
для решения первой части нашёл готовый код, а вот функцию клика не получается написать.
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
<head>
<script type="text/javascript">
  var total_pics_num = 4; // колличество изображений
  var interval = 5000;    // задержка между изображениями
  var time_out = 1;       // задержка смены изображений
  var i = 0;
  var timeout;
  var opacity = 100;
  function fade_to_next() {
    opacity--;
    var k = i + 1;
    var image_now = 'image_' + i;
    if (i == total_pics_num) k = 1;
    var image_next = 'image_' + k;
    document.getElementById(image_now).style.opacity = opacity/100;
    document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
    document.getElementById(image_next).style.opacity = (100-opacity)/100;
    document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
    timeout = setTimeout("fade_to_next()",time_out);
    if (opacity==1) {
      opacity = 100;
      clearTimeout(timeout);
    }
  }
  setInterval (
    function() {
      i++;
      if (i > total_pics_num) i=1;
      fade_to_next();
    }, interval
  );
</script>
</head>
 
<body>
<img src='images/1.jpg' id="image_1" style="position: absolute; z-index:100;" />
  <img src='images/2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute; z-index: 200" />
  <img src='images/3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute; z-index: 300" />
  <img src='images/4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute; z-index:400" />
  <img src="http://www.cyberforum.ru/images/but1.png" />
  <img src="http://www.cyberforum.ru/images/but2.png" />
  <img src="http://www.cyberforum.ru/images/but3.png" />
  <img src="http://www.cyberforum.ru/images/but4.png" />
</body>
у меня были попытки написать отдельную функцию, но она не работает =((
помогите пожалуйста, я новичок

Добавлено через 4 часа 16 минут
я написал такую функцию, но она нифига не работает...
Javascript
1
2
3
4
5
6
7
8
9
10
function flade_onClick(im){ 
      var image_next = 'image_' + im;
      var image_now = 'image_' + i;
      document.getElementById(image_now).style.opacity = 0;
      document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
      document.getElementById(image_next).style.opacity = 1;
      document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
      k=im;
      i= im-1;
      }
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
07.02.2013, 20:38
Ответы с готовыми решениями:

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

Смена картинок
У меня на denwer'е есть сайт, на одной страничке есть блок в котором...

Смена картинок по таймеру
Доброго времени суток, уважаемые форумчане! Задача поставлена следующим...

Смена картинок местами
Есть такая страничка: &lt;html&gt; &lt;style&gt; #block1 {float:right; width:50%;}...

Параллельная смена картинок
Доброго всем времени суток)) Есть код для смены картинок через &lt;select&gt; ...

8
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,331
07.02.2013, 21:17 2
Цитата Сообщение от WhizArt Посмотреть сообщение
нужно сделать непрерывную смену картинок.
так же нужно сделать возможным переход к любой из них при клике соответствующей кнопки (нажали кнопку 3 - перешли на 3 картинку)
тут непонятка, если картинки меняются непрерывно, то где смысл кнопок, не вижу смысла делать как написано, наверно что то еще должно быть
0
WhizArt
0 / 0 / 0
Регистрация: 12.08.2011
Сообщений: 17
07.02.2013, 21:22  [ТС] 3
никаких непоняток.
действительно есть и картинки и кнопки.
ну просто может я не хочу ждать пока пробегут все картинки, а сразу перейти к конкретной.
0
wolfalone
В экстазе
165 / 149 / 38
Регистрация: 05.08.2012
Сообщений: 754
Записей в блоге: 3
07.02.2013, 23:11 4
WhizArt, чем не устроили готовые слайдеры?
0
WhizArt
0 / 0 / 0
Регистрация: 12.08.2011
Сообщений: 17
07.02.2013, 23:25  [ТС] 5
не всегда есть всё готовое.
начинаю учить JS. сталкнулся с данной проблемой, не могу решить, попросил помощи...
0
wolfalone
В экстазе
165 / 149 / 38
Регистрация: 05.08.2012
Сообщений: 754
Записей в блоге: 3
08.02.2013, 00:48 6
Я тут на досуге начиркал простой пример непрерывной смены картинок. Выкладываю код страницы целиком. Как я уже говорил в предыдущем посте - удобнее использовать JQuery (что я и делаю).

Кликните здесь для просмотра всего текста
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
52
53
54
55
56
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #image_list img {
                display: none;
                position: absolute;
                width: 384px;
                height: 216px;
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            var images = 0; //Общее кол-во картинок в слое
            var now_show = 1; //Картинка показываемая в текущий момент времени
            $(document).ready(function() {
                images = $('#image_list > img'); //Массив с картинками
                $('#image_list > img:first').show(); //Находим первую картинку по показываем ее
                setInterval('next_image()', 3000); //Таймер смены картинок (в милисекундах)
            });
 
            //Функция показа картинок
            function showImage(id) {
                now_show = id;
                $('#image_list > img:visible').fadeOut('normal', function() {
                    $(images[id-1]).fadeIn('normal');
                });
            }
 
            //Функция проверяет не выходит ли текущее значение счетчика за его пределы, если нет - увеличивает счетчик на 1 и показывает слеедующую картинку
            function next_image() {                
                if (now_show == images.length)
                    now_show = 1;
                else
                    now_show++;
                showImage(now_show);
            }
        </script>    
    </head>
    <body>        
        <button onClick="showImage(1);">1</button>
        <button onClick="showImage(2);">2</button>
        <button onClick="showImage(3);">3</button>
        <button onClick="showImage(4);">4</button>
        
        <div id="image_list">
            <img src="http://desktopwallpapers.org.ua/download.php?img=201110/1920x1080/desktopwallpapers.org.ua-7035.jpg" alt=""/>
            <img src="http://www.fullhdoboi.ru/_ph/17/706745777.jpg" alt=""/>
            <img src="http://banana.by/uploads/posts/2010-01/1262899264_91182.jpg" alt=""/>
            <img src="http://arstyle.org/uploads/posts/2010-07/1278397457_1272350187_abstract-light-vectors-abstract-light-vector.jpg" alt=""/>
        </div>
 
    </body>
</html>


Добавлено через 3 минуты
Основные достоинства этой библиотеки в данном примере: быстро, просто, понятно, кроссбраузерно.

P.S. Код сырой, особо его оптимизацией я не занимался, написан исключительно для примера. Все картинки загружаются из сети, рекомендую заменить URL'ы картинок на свои.
1
WhizArt
0 / 0 / 0
Регистрация: 12.08.2011
Сообщений: 17
08.02.2013, 01:01  [ТС] 7
невероятнейшим образом благодарен Вам.
значит надо осваивать jQuery
0
wolfalone
В экстазе
165 / 149 / 38
Регистрация: 05.08.2012
Сообщений: 754
Записей в блоге: 3
08.02.2013, 01:18 8
Цитата Сообщение от WhizArt Посмотреть сообщение
значит надо осваивать jQuery
Думаю, что освоить её как минимум стоит. Это конечно не панацея, но 90% задач (JS) возникающих при разработке она решает на ура. При этом, библиотеку "признали": Google, Microsoft, Яndex и другие. Ещё к ней есть весьма и весьма симпатичный UI-интерфейс (окошки, календарики, и пр. плюшки), а так же, множество плагинов буквально "для всего".

Добавлено через 1 минуту
Забыл самое главное: библиотека бесплатна и имеет открытый исходный код.
0
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,331
08.02.2013, 09:15 9
Цитата Сообщение от WhizArt Посмотреть сообщение
никаких непоняток.
действительно есть и картинки и кнопки.
ну просто может я не хочу ждать пока пробегут все картинки, а сразу перейти к конкретной.
этот момент и был не понятен
0
08.02.2013, 09:15
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.02.2013, 09:15

Автоматическая смена картинок
Суть проблемы вот в чем: Написал скрипт(javascript) меняющий одну картинку на...

Циклическая смена картинок
Друзья, помогите реализовать JavaScript циклической смены картинок, кучу...

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


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

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

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