Question

我希望创建一个摄影网站，其背景图像每隔几秒就会改变一次。我通过使用以下方式更改图像：

<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非常基础。任何帮助都会非常感谢

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

Answer 2

您可以使用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=的{{1}}。

Answer 3

您可以使用一个简单的插件，例如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'替换为该文件的路径（你应该下载）。

Answer 4

我认为插件是一个很大的开销，可以通过一些代码来完成。

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

一些评论：
- 我选择使用背景图像，因为我相信背景就是你所追求的，你不希望图片出现在印刷品上。您可以争辩说，对于摄影网站而言，背景图像是实际内容，但更改代码以适应图像应该很容易。
- 请注意，我使用2个div作为图像，所以我可以淡入一个和一个。也许最好用javascript添加第二个以避免unnessacary标记。我会保留的第一个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);

我在那里写了很多评论，但随便问一下！

淡出过渡

4 个答案: