вращающееся изображение на обновлении

Я совершенно новичок в этом, так что медведь со мной. Я хочу повернуть основное изображение на этой странице http://jovanatanackovic.com/index.html каждый раз, когда он обновляется или загружается. Я нашел это и попытался добавить его в теги сценариявращающееся изображение на обновлении

function random_imglink(){ 
    var theImages = new Array() 

    theIimages[1]="images/thalia-heffernan-4.jpg" 
    theImages[2]="images/volcano-surfing-the-ascent.jpg" 
    theImages[3]="images/rooster-fighting-sucking-blood-from-face.jpg" 
    theImages[4]="images/cooper-canyon-fallen-tarahumara.jpg" 
    theImages[5]="images/copper-canyon-finishers.jpg" 

    var j = 0 
    var p = theImages.length; 
    var preBuffer = new Array() 
    for (i = 0; i < p; i++){ 
    preBuffer[i] = new Image() 
    preBuffer[i].src = theImages[i] 
    } 
    var whichImage = Math.round(Math.random()*(p-1)); 

    function showImage(){ 
    if(whichImage==0){ 
    document.write('<a href =""><img src="'+theImages[whichImage]+'" border=0 width=689 height=466></a>'); 
    } else if(whichImage==1){ 
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=689 height=466></a>'); 
    } else if(whichImage==2){ 
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=689 height=466></a>'); 
    } else if(whichImage==3){ 
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=689 height=466></a>'); 
    } else if(whichImage==4){ 
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=689 height=466></a>'); 
    } 
}

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

<script>showImage();</script>

это правильно? Я уверен, конечно, где именно сказать, что текущее изображение связано с css. Я попытался добавить его в теги div.

источник

2013-04-04 user2246527

Попробуйте использовать CSS-анимацию в сочетании с CSS-вращением (преобразование). – 2013-04-04 20:17:13

«Вращать» - это плохой выбор слов. Я думаю, все думают, что вы хотите, чтобы изображение вращается. – thelr

Я сделал: P Я просто делал это потрясающее вращение: P – 2013-04-04 20:28:29

Попробуйте это;

JSfiddle

CSS

#imgTest { 
    background-image: url('YourImage.jpg'); 
    width: 450px; 
    height: 281px; 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-direction: right; 
    -webkit-animation-timing-function: linear; 
    -ms-animation-name: rotate; 
    -ms-animation-duration: 4s; 
    -ms-animation-iteration-count: 1; 
    -ms-animation-direction: right; 
    -ms-animation-timing-function: linear; 
    -moz-animation-name: rotate; 
    -moz-animation-duration: 4s; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-direction: right; 
    -moz-animation-timing-function: linear; 
    -o-animation-name: rotate; 
    -o-animation-duration: 4s; 
    -o-animation-iteration-count: 1; 
    -o-animation-direction: right; 
    -o-animation-timing-function: linear; 
    animation-name: rotate; 
    animation-duration: 4s; 
    animation-iteration-count: 1; 
    animation-direction: right; 
    animation-timing-function: linear; 
} 

@-webkit-keyframes rotate { 
    0% { 
     -webkit-transform:rotate(0deg); 
     transform:rotate(0deg); 
    } 
    100% { 
     -webkit-transform:rotate(360deg); 
     transform:rotate(360deg); 
    } 
} 

@-ms-keyframes rotate { 
    0% { 
     -ms-transform:rotate(0deg); 
     transform:rotate(0deg); 
    } 
    100% { 
     -ms-transform:rotate(360deg); 
     transform:rotate(360deg); 
    } 
} 

@-moz-keyframes rotate { 
    0% { 
     -moz-transform:rotate(0deg); 
     transform:rotate(0deg); 
    } 
    100% { 
     -moz-transform:rotate(360deg); 
     transform:rotate(360deg); 
    } 
} 

@-o-keyframes rotate { 
    0% { 
     -o-transform:rotate(0deg); 
     transform:rotate(0deg); 
    } 
    100% { 
     -o-transform:rotate(360deg); 
     transform:rotate(360deg); 
    } 
} 

@keyframes rotate { 
    0% { 
     transform:rotate(0deg); 
    } 
    100% { 
     transform:rotate(360deg); 
    } 
}

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>HTML</title> 
    <link rel="stylesheet" href="main.css" type="text/css" /> 
</head> 
<body> 
    <div id="imgTest"></div> 
</body> 
</html>

источник

2013-04-04 20:23:50

Я не уверен, что OP означало такое «вращение». Скорее всего, на каждой загрузке страницы отображается другое изображение. – Schleis

Это позор :( – 2013-04-04 20:27:09

Может быть, OP все равно его осуществит;) – thelr

Если вы действительно хотите использовать этот код, то вы хотите следующее:

<div class="photo"> 
    <script> 
    ...JAVASCRIPT HERE... 
    </script> 
</div>

Конечно, было бы гораздо лучше, решение использовать JavaScript, как следующее вместо document.write:

В ГОЛОВЕ:

<script> 
function showImage() 
{ 
    // Better array init thanks to Joseph Silvashy 
    var theImages = [ 
    "images/thalia-heffernan-4.jpg", 
    "images/volcano-surfing-the-ascent.jpg", 
    "images/rooster-fighting-sucking-blood-from-face.jpg", 
    "images/cooper-canyon-fallen-tarahumara.jpg", 
    "images/copper-canyon-finishers.jpg" 
    ] 

    var whichImage = Math.round(Math.random()*(p-1)); 

    document.getElementById("rotatingImage").src = theImages[whichImage]; 
} 
</script>

<body onload="showImage()"> 
...

источник

2013-04-04 20:24:21 thelr

Вы не имеете в виду 'theImages [whichImage]'? – danmcardle

Да, да. Исправлено, спасибо. – thelr

Чтобы продолжить, вы можете добавить функцию тайм-аута, которая изменила бы изображение после стольких секунд. Если вы сделали это, вы бы хотели сбросить «случайный» номер и просто перебирать от 0 до 4 каждый раз. – thelr

As наконечник, вы можете упростить массив:

var theImages = [ 
    "images/thalia-heffernan-4.jpg", 
    "images/volcano-surfing-the-ascent.jpg", 
    "images/rooster-fighting-sucking-blood-from-face.jpg", 
    "images/cooper-canyon-fallen-tarahumara.jpg", 
    "images/copper-canyon-finishers.jpg" 
]

источник

2013-04-04 20:27:52

Хорошее предложение. – thelr

вращающееся изображение на обновлении

ответ

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