Question

我是全新的，所以请耐心等待。我希望每次刷新或加载时在此页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标签中添加它。

Answer 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>

Answer 2

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

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

当然，使用类似下面的javascript代替document.write会是一个更好的解决方案：

在HEAD中：

<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()">
...

Answer 3

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

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"
]

刷新时旋转图像

3 个答案: