Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Что нужно дописать в коде чтобы изображение менялось постоянно. (https://javascript.ru/forum/xhtml-html-css/29683-chto-nuzhno-dopisat-v-kode-chtoby-izobrazhenie-menyalos-postoyanno.html)

vadim90k 08.07.2012 02:28

Мне еще един код нужен чтобы автоматически начинал работать принцип тот же самый циклическое повторение изображений по очереди

9xakep 08.07.2012 10:49

vadim90k,
я же сказал в body напиши:
<body onload='start()'></body>

vadim90k 08.07.2012 13:55

Как объединить 2 этих кода и возможно ли это?

Циклическая смена картинок
<!-- Начало кода -->
<script type="text/javascript" language="javascript">
numimg=1;
imgslide=new Array()
imgslide[1]=new Image();
imgslide[2]=new Image();
imgslide[3]=new Image();
imgslide[4]=new Image();
imgslide[5]=new Image();
imgslide[6]=new Image();
imgslide[7]=new Image();
imgslide[8]=new Image();
imgslide[9]=new Image();
imgslide[10]=new Image();
imgslide[11]=new Image();
imgslide[12]=new Image();
imgslide[13]=new Image();
imgslide[14]=new Image();
imgslide[15]=new Image();
imgslide[16]=new Image();
imgslide[17]=new Image();
imgslide[1].src=".png";
imgslide[2].src=".png";
imgslide[3].src=".png";
imgslide[4].src=".png";
imgslide[5].src=".png";
imgslide[6].src=".png";
imgslide[7].src=".png";
imgslide[8].src=".png";
imgslide[9].src=".png";
imgslide[10].src=".png";
imgslide[11].src=".png";
imgslide[12].src=".png";
imgslide[13].src=".png";
imgslide[14].src=".png";
imgslide[15].src=".png";
imgslide[16].src=".png";
imgslide[17].src=".png";
function demoslides(){
document.img.src=imgslide[numimg].src;
numimg++;
if(numimg==17)
numimg=1;
setTimeout("demoslides()", 100)} // Время
</script>
<body onLoad="demoslides()">
<img name="img"/>
<!-- Конец кода -->


При наведение мышки меняется прозрачность
<!-- Начало кода -->
<script language="javascript">
function ok(){//Функция начальной установки прозрачности
di=document.images
for(c=1;c<=4;c++){
di['i'+c].src='files/loading.gif'
if (di['i'+c].filters){
di['i'+c].style.filter='alpha(opacity='+s+')'}
else{
di['i'+c].style.opacity=s/100}}}
//Временные единицы относительные, подбирать экспериментально
var up=20 //Время выполнения эффекта, появление
var dn=20 //Время выполнения эффекта, исчезновение
var s=10 //Начальная прозрачность, от 0
var r=30 //Конечная прозрачность, до 100
var x=25/up
var y=-25/dn
var z=new Array()
var timer=new Array()
function on(i){
if (timer[i.id]){clearInterval(timer[i.id])}
z[i.id]=x
timer[i.id]=setInterval(function(){return time(i)},up)}
function off(i){
clearInterval(timer[i.id])
z[i.id]=y
timer[i.id]=setInterval(function(){return time(i)},dn)}
function time(i){
if (i.filters){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity}
else{
c=i.style.opacity*100
c+=z[i.id]
i.style.opacity=c/100}
if (c<=s){if(i.filters){i.filters.alpha.opacity=s}els e{i.style.opacity=s/100};clearInterval(timer[i.id]);return}
if (c>=r){if(i.filters){i.filters.alpha.opacity=r}els e{i.style.opacity=r/100};clearInterval(timer[i.id]);return}
}
</script>
<body onload=ok()>
<p><img id=i1 onMouseOver=on(this) onMouseOut=off(this)></p>
<!-- Конец кода -->

9xakep 08.07.2012 16:54

vadim90k,
если ты хочешь добавить новые картинки, то в массив links запихивай новые ссылки.

vadim90k 08.07.2012 22:53

Хочу чтобы картинки менялись цикличность и при наведение на них курсор они меняли прозрачность.

Первый код просто меняет картинки а второй при наведении на картинку просто меняет ее прозрачность...

9xakep 08.07.2012 23:07

vadim90k,
ну так я тебе и говорю.
var links = ['http://javascript.ru/cat/list/event.gif','http://javascript.ru/cat/list/libs.jpg']

Здесь 2 3 ссылки на картинки(последнюю я добавил свою аватарку), добавь сюда все нужные, и они будут меняться.
<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <img onmouseover='start()' onmouseout='stop()' id='img'></img>
    <script>
	var links = ['http://javascript.ru/cat/list/event.gif','http://javascript.ru/cat/list/libs.jpg','http://javascript.ru/forum/image.php?u=12890&dateline=1303149256'],
    next = 1,
        img = document.getElementById('img');
      img.src = links[0]
        
      function change() {
        next == links.length-1 ? next = 0 : next++
		img.src = links[next]
          }
      function start() {
        animation = setInterval(change, 100) // тут время изменяй
          }
      function stop() {
        clearInterval(animation)
          img.src = 'http://javascript.ru/cat/list/event.gif' // тут исходная картинка
          }
    </script>

  </body>
</html>

vadim90k 08.07.2012 23:24

да вот что мне нужно http://nastenke.narod.ru/ только чтобы вместо gif анимации это были отдельные кадры. И если навести на ту загрузку она меняет прозрачность.

vadim90k 08.07.2012 23:24

хочу сделать также только с отдельными кадрами взятыми из gif

9xakep 09.07.2012 09:21

vadim90k,
<!DOCTYPE HTML>
<html>
  
  <head></head>
  
  <body onload='start()'>
    <img onmouseover='start2()' onmouseout='stop()' id='img'>
    <script>
      var links = ['http://javascript.ru/cat/list/event.gif', 'http://javascript.ru/cat/list/libs.jpg'] // тут ставишь ссылки на 2 меняющиеся картинки
      var opacity = ['http://api.flattr.com/button/flattr-badge-large.png', 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'],
        next = 1,
        next2 = 1,
        img = document.getElementById('img');
      img.src = links[0]


      function start() {
        animation = setInterval(function () {
	next == links.length - 1 ? next = 0 : next++
	img.src = links[next]
	}, 100) // тут время изменяй (для 2ух картинок)
        }

        function start2() {
	  clearInterval(animation)
          animation2 = setInterval(function () {
	next2 == opacity.length - 1 ? next2 = 0 : next2++
	img.src = opacity[next2]
	},100)
        }

        function stop(op) {
          clearInterval(animation2)
         start()
            img.src = 'http://javascript.ru/cat/list/event.gif' // тут исходная картинка
         
        }
    </script>
  </body>

</html>

Я уже не знаю, как тебе объяснить, просто в массив links вставь 2 картинки, в массив opacity вставь ссылки на картинки для смены прозрачности

vadim90k 09.07.2012 11:38

Да я понимаю что этот код меняет картинки! Мне нужно чтобы он меня и при наведении на него менялась прозрачность! В этом коде я не вижу параметры прозрачности.


Часовой пояс GMT +3, время: 15:34.