VPF::Простейшее слайдшоу - Форум программистов

Pena

Дата 11.9.2007, 00:18 (ссылка)

(голосов:1)

Загрузка ...

КорнеплодЪ

Профиль
Группа: Участник
Сообщений: 161
Регистрация: 20.4.2006
Где: эРэФия, аул Москв а...

Репутация: нет
Всего: нет

В меру "понимания" JS smile

, накатал сие:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>   
   <Head>
      <Meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
      <title>::</title>
      <Style type="text/css"><!--
         Body {margin: 0; font-size: 12px; font-family: Verdana, Geneva, Arial;}
         .O6epmKa {width: 100%; height: 100%; text-align: center;}         
   --></Style>
      <script type="text/javascript" language="JavaScript"><!--         
         // Число: 1 или 2 + зеркальное отражение
         var Oug = 1;
         function OguH_uvu_gBa() {
            if (Oug == 1) {
               document.getElementById('b_Oug1').innerHTML = Oug;
               document.getElementById('strong_Oug2').innerHTML = Oug;
               Oug = 2;
               document.getElementById('b_Oug2').innerHTML = Oug;
               document.getElementById('strong_Oug1').innerHTML = Oug
               }
            else {
               document.getElementById('b_Oug1').innerHTML = Oug;
               document.getElementById('strong_Oug2').innerHTML = Oug;
               Oug = 1;
               document.getElementById('b_Oug2').innerHTML = Oug;
               document.getElementById('strong_Oug1').innerHTML = Oug
               }
            }
        
         // Число: от 1 до N
         var Om1goN = 0;
         var N = 5; /* Число всех картинок */
         function Om_1_go_N() {
            if (Om1goN < N) {
               Om1goN = Om1goN + 1;
               //document.getElementById('b_Om1goN').innerHTML = Om1goN       
               }
            else {
               Om1goN = 1;
               //document.getElementById('b_Om1goN').innerHTML = Om1goN
               }
            }
         
         // Смена картинки
         function CMeHa_KapmuHoK() {
            var NuO = Om1goN + 1;
            if (Om1goN == N) {
               Om1goN = 1;
               document.getElementById('b_Om1goN').innerHTML = Om1goN;
               document.getElementById('KapmuHKa_1').src = 'img/' + Om1goN + '.jpg'
               }
            else {
               document.getElementById('b_Om1goN').innerHTML = Om1goN;
               document.getElementById('KapmuHKa_1').src = 'img/' + Om1goN + '.jpg'
               }
            if (NuO > N) {
               NuO = Om1goN + 1;
               document.getElementById('strong_NuO').innerHTML = NuO;
               document.getElementById('KapmuHKa_2').src = 'img/' + NuO + '.jpg'
               }
            else {
               document.getElementById('strong_NuO').innerHTML = NuO;
               document.getElementById('KapmuHKa_2').src = 'img/' + NuO + '.jpg'
               }
            } 
            
         // Гаснет
         var a = 100, time; 
         function Start(e) {   
            if(e) {
               time = setInterval('racHem()', 10); 
               }
            else {
               clearInterval(time);
               a = 0;
               document.getElementById('b_Oug').innerHTML = a
               }
            }
         function racHem() {
            a--;
            if(a >= 0) {
               document.getElementById('b_Oug').innerHTML = a;
               document.getElementById('KapmuHKa_1').style.filter = 'alpha(opacity =' + a + ')'
               }
            else {
               clearInterval(time);
               a = 100;
               }
            }
            
         function All() {
            OguH_uvu_gBa();
            Om_1_go_N();
            CMeHa_KapmuHoK();
            Start(1)
            }
            
   --></Script>
   </Head>
   <Body onLoad="All()">
      <table class="O6epmKa" cellpadding="0" cellspacing="0">
         <tr>
            <td>
               <div style="height: 100px;">
                  <img id="KapmuHKa_1" src="img/1.jpg" style="position: absolute; z-index: 2">
                  <img id="KapmuHKa_2" src="img/2.jpg" style="position: absolute; z-index: 1">               
               </div>
               <div onClick="All()" style="margin: 15px; padding: 5px; width: 55px; background-color: #f0f0f0; cursor: hand; border: 1px solid black;">Жми!</div>
               &lt;img id=&quot;KapmuHKa_<b id="b_Oug1"></b>&quot; src=&quot;img/<b id="b_Om1goN"></b>.jpg&quot; style=&quot;z-index: <b id="b_Oug2"></b>&quot;&gt; <br>
               &lt;img id=&quot;KapmuHKa_<strong id="strong_Oug1"></strong>&quot; src=&quot;img/<strong id="strong_NuO"></strong>.jpg&quot; style=&quot;z-index: <strong id="strong_Oug2"></strong>&quot;&gt; <br>
               <b id="b_Oug"></b>       
            </td>
         </tr>
      </table>
   </Body>
</HTML>

Вот только 1) при переключении происходит нежелательный скачёк на новую картинку и только после этого само "затухание" 2) Если click-ать кнопку во время "затухания" оно начинает "циклить" 3) не могу сообразить как всё это "закрутить" так, чтобы не надо было на кнопку нажимать, а само... (но 1 раз!))

ВАМ - ФИГНЯ, А МНЕ - smile

Не проходите мимо! smile

--------------------

Самовар по всем вопросам - сильно не ругайте

ksnk

Дата 17.9.2007, 17:43 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386

Цитата(Pena @ 11.9.2007, 00:18

)

1) при переключении происходит нежелательный скачёк на новую картинку и только после этого само "затухание"

Как написано - так и происходит...
CMeHa_KapmuHoK();
Start(1)
Нужно , видимо, сначала загасить текущую картинку, а потом появить следующую... для простоты...

Цитата(Pena @ 11.9.2007, 00:18

)

2) Если click-ать кнопку во время "затухания" оно начинает "циклить"

И не мудренно, можно переписать вот так

Код


         function Start(e) {   
            if(e) {
               if(time) clearInterval(time) ;// вот это вставить!!!!
               time = setInterval('racHem()', 10); 
               }
  ...

Иначе происходит установка множества функций Гашения, которые никогда уже не кончаются...

Цитата(Pena @ 11.9.2007, 00:18

)

3) не могу сообразить как всё это "закрутить" так, чтобы не надо было на кнопку нажимать, а само... (но 1 раз!))

Ну, ну... а про интервалы, говоришь, чего-то слышал smile

?

Еще. Если использовать, к примеру вот такую функцию установки прозрачности

Код


function setOpacity(e,opacity){
    if (opacity == 0){
        if(e.style.visibility != "hidden") e.style.visibility = "hidden";
    } else {
        if(e.style.visibility != "visible") e.style.visibility = "visible";
    }
    if (window.ActiveXObject) e.style.filter = "alpha(opacity=" + opacity*100 + ")";
    e.style.opacity = opacity;
}

, то код легко сделать значительно более кроссбраузерным. Нужно только помнить, что в этом случае значение бежит от 0 до 1, а не до 100 ...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »