добавить анимацию в javascript, используя css

Я использую приведенный ниже код, чтобы добавить анимацию в слайд-шоу с помощью css. Но анимация применяется только к первому изображению, а не к другим изображениям. как добавить переход к другим изображениям, используя css?добавить анимацию в javascript, используя css

<html> 
    <style> 
     #slideshow{width:310;height:210;border-style:solid;} 
     #imge{ 
      position:absolute;left:15;top:15; 
      animation:myfirst 3s;} 
     @keyframes myfirst 
     { 
      from {width:0;} 
     to {width:300;} 
     } 

     @-webkit-keyframes myfirst /* Safari and Chrome */ 
     { 
      from {width:0;} 
     to {width:300;} 
     } 

    </style> 
    <body> 
     <div id="slideshow"> 
      <img id="imge" src="img1.jpg" height="200" width="300"> 
     </div> 
     <script> 
      var count=1; 
      mf(); 
      function mf() 
      { 
       document.getElementById("imge").src="img"+count+".jpg"; 

       if(count<3) 
        count++; 
       else 
        count=1; 
       setTimeout("mf()",3000); 
      } 

     </script> 
    </body> 
</html>

источник

2014-01-09 user2828552

Использование CSS3 анимации свойство анимации-итерация подсчета

Определяет количество раз играется анимация. По умолчанию 1, так что сделать это до бесконечности

Попробуйте этот код:

Fiddle:

#slideshow{width:310px;height:210px;border-style:solid;} 
#imge{ 
position:absolute;left:15;top:15; 
width:310px;height:210px; 
animation:myfirst 3s; 
animation-iteration-count:infinite; 
-webkit-animation:myfirst 5s; /* Safari and Chrome */ 
-webkit-animation-iteration-count:infinite;} 

@keyframes myfirst 
{ 
from {width:0px;} 
to {width:300px;} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
from {width:0px;} 
to {width:300px;} 
}

JS:

var count=1; 
mf(); 
function mf() 
{ 
document.getElementById("imge").src="img"+count+".jpg"; 

if(count<3) 
count++; 
else 
count=1; 
setTimeout("mf()",3000); 
}

источник

2014-01-09 05:28:56 Manoj

прекрасный ..... ур абсолютно правильный ... теперь работает нормально – user2828552

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

В вашем коде вы используете бесконечный цикл вправо ...? – Manoj

<img id="imge" src="img1.jpg" height="200" width="300">

изменение

<img class="imge" id="imge1" src="img1.jpg" height="200" width="300" style="display:none;"/> 
<img class="imge" id="imge2" src="img2.jpg" height="200" width="300" style="display:none;"/> 
<img class="imge" id="imge3" src="img3.jpg" height="200" width="300" style="display:none;"/>

так CSS #imge должен быть .imge

Javascript

function mf() 
{ 
    for(var i=1;i<4;i++) 
    { 
    document.getElementById("imge"+i).style.display="none"; 
    } 

    document.getElementById("imge"+count).style.display="block"; 

if(count<3) 
    count++; 
else 
    count=1; 
setTimeout("mf()",3000); 

}

при принятии imge шоу, анимация будет срабатывать

источник

2014-01-09 05:26:58 kiro

не работает этот путь ... 1-я ямга отображается с переходом, но не отдыхает – user2828552

Переход от id с до class ES:

Вместо этого:

<div id="slideshow"> 
     <img id="imge" src="img1.jpg" height="200" width="300"> 
    </div> 

    #slideshow{...} 
    #imge{...}

к этому:

.slideshow{...} 
    .imge{...}

Причина в том, что id s - уникальный (у вас может быть только один), но классов нет.

Надеюсь, это поможет. Приветствия

источник

2014-01-09 05:27:32

не работает таким образом – user2828552

То, что вы хотите, называется animation-iteration-count собственностью CSS. Вы можете проверить это here

Установив номер, вы можете исправить количество показов изображения для определенной анимации. В вашем случае вы можете установить его на 3, поскольку у вас есть 3 изображения. Вы можете также бесконечно контурировать его, используя счет infinite

источник

2014-01-09 05:39:16 aelor

добавить анимацию в javascript, используя css

ответ

Смежные вопросы