0

我正在寻找一个摄影网站，它的背景图像每隔几秒就会改变一次。我使用以下方法更改图像：

<script type='text/javascript'>
            var imageID=0;
            function changeimage(every_seconds){
     //change the image
            if(!imageID){
            document.getElementById("myimage").src="John%20Gallacher%20Photography/images/composite/Composite%201.jpg";
            imageID++;
            }
            else{if(imageID==1){
            document.getElementById("myimage").src="John%20Gallacher%20Photography/images/composite/Composite%202.jpg";
            imageID++;
            }
            else{if(imageID==2){
            document.getElementById("myimage").src="John%20Gallacher%20Photography/images/composite/Composite%203.jpg";
            imageID=0;
            }
            }
            }
             //call same function again for x of seconds
            setTimeout("changeimage("+every_seconds+")",((every_seconds)*5000));
            }
        </script>
</head>
<body onload='changeimage(2)'>
    <div>
        <img id="myimage" src="John%20Gallacher%20Photography/images/composite/Composite%201.jpg"/>
    </div>

是否可以使图像淡入然后再次淡出，如果可以，最简单的方法是什么。我对html和css有基本的了解，我的javascript非常基础。任何帮助都会非常感谢

4

4 回答 4

1

支持列表是什么？如果您不担心较旧的 IE，那么您可以使用 CSS Transitions 进行转换并使用 js
http://jsfiddle.net/Bushwazi/MYKFT/更改状态

#myimage {
  -webkit-transition:all 1s linear 0s;
  -moz-transition:all 1s linear 0s;
  -o-transition:all 1s linear 0s;
  transition:all 1s linear 0s;
  -webkit-transform: translate3d(0,0,0); /* Fixes trails in Chrome */
}

然后只用js改变不透明度，然后图像，不透明度......

var imageID = 0,
        ti = document.getElementById("myimage");;
var changeImage = function(t){
    // change the opacity of the image to 0, let the css control the animation
    ti.style.opacity = "0.0";
    ti.style.filter = 'alpha(opacity=00)'; // IE fallback
    // after 1 second (the animation), change the image
    setTimeout(function(){
        //change the image
        switch(imageID){
            case 0:
                ti.src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTM7c8EFwQ_PseqOEblAtm9qXali9kzvBKsmrGDECLYu1HJP3EO";
            break;
            case 1:
                ti.src="https://si0.twimg.com/profile_images/2317326635/3kglmsqti3msjlb1nr60.png";
            break;
            case 2:
                // return to the original image
                ti.src="http://upload.wikimedia.org/wikipedia/en/c/cc/FPO_mark3.jpg";
            break;
            default:
                // do nothing
        }
        if(imageID == 2){
            imageID = 0;
        } else {
            imageID++;
        }
        // change the opacity of the image to 0, let the css control the animation
        ti.style.opacity = "1.0";
        ti.style.filter = 'alpha(opacity=100)'; // IE fallback  
    },1000);
} // close changeimage
//call same function again for x of seconds
window.setInterval(changeImage, 5000);
于 2013-06-18T20:05:45.787 回答
0

我认为一个插件对于一些你可以用一点代码做的事情来说是很多开销。

我为您设置了一个简单的示例：http: //jsfiddle.net/Pevara/XcBTx/1/

几点说明：
- 我选择使用背景图像，因为我相信背景是您所追求的，并且您不希望图片出现在打印件上。您可能会争辩说，对于摄影网站来说，背景图像是实际内容，但更改代码以处理图像应该很容易。
- 请注意，我使用 2 个 div 的图像，所以我可以淡入和淡出。也许最好用 javascript 添加第二个以避免不必要的标记。我会保留的第一个 div，因为您希望没有 javascript 的用户至少看到一张照片。你可以考虑把它放在身体上，但我还是把它留给你。- 可能需要预先加载图像，并在开始幻灯片之前等待它们被加载。不应该太难，那里有很多信息。

和 javascript（要放在$(window).load处理程序中）：

// the list of background images
var myImages = ['http://placekitten.com/900/400','http://placekitten.com/550/600'];
// the transition speed
var fadeSpeed = 500;
// the time between transitions
var playSpeed = 2000;

function fadeToNextImage() {
    // -- prepare some vars
    // the image wrappers
    var $bg1 = $('#bg1');
    var $bg2 = $('#bg2');
    // the index of the next image in our array
    var nextNr = parseInt($bg1.data('number')) + 1;
    // if the index is larger then the number of images,
    // we want the first image
    if (nextNr > myImages.length - 1) { nextNr = 0; }
    // the path to the next image
    var nextImg = 'url(' + myImages[nextNr] + ')';

    // set the image as background on bg2
    $bg2.css('background-image', nextImg);
    // fade out bg1
    $bg1.fadeOut(fadeSpeed);
    // fade in bg2
    $bg2.fadeIn(fadeSpeed, function() {
        // when the cross fade is ready
        // set the image as background on bg1
        $bg1.css('background-image', nextImg);
        // update the number attribute
        $bg1.data('number', nextNr);
        // show bg1 (which now contains the same image as bg2)
        $bg1.show();
        // hide bg2 (to prepare it for the next slide)
        $bg2.hide();
    });
}

// start the slideshow
var interval = window.setInterval(function() {fadeToNextImage();}, playSpeed + fadeSpeed);

我在那里发表了很多评论，但请随时提问！

于 2013-06-18T20:37:29.183 回答
0

您可以为此使用一个简单的插件，例如jQuery Cycle。代码应如下所示：

<head>
...
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/jquery.cycle.lite.js"></script>
...
</head>
...
    <div class="fader">
         <img src="image1.jpg" width="100px" height="100px">
         <img src="image2.jpg" width="100px" height="100px">
         <img src="image3.jpg" width="100px" height="100px">
    </div>
...
    <script>
        $('.fader').cycle();
    </script>
</body>

您应该将“/js”替换为该文件的路径（您应该下载）。

于 2013-06-18T19:22:00.960 回答
0

您可以使用jQuery。这有许多转换，包括fadeIn()和fadeOut()。

将这些功能应用于您的图像，如下所示：

$("#image_id").fadeIn(); $("#image_id").fadeOut();

但首先在你的脑海中你需要包含 jQuery。你可以这样做：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

#image_id是HTML 标记中id=的。<img>

于 2013-06-18T19:12:03.230 回答