0

我对此完全陌生，所以请耐心等待。我希望在每次刷新或加载时旋转此页面http://jovanatanakovic.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 标签中。

4

3 回答 3

1

尝试这个;

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-04T20:23:50.970 回答
0

如果您真的想使用该代码，那么您需要以下内容：

<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-04T20:24:21.143 回答
0

作为提示，您可以简化数组：

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-04T20:27:52.853 回答