如何使图像之间的过渡平滑答案

【问题标题】：How to make transitions smooth between images如何使图像之间的过渡平滑
【发布时间】：2014-05-08 04:33:22
【问题描述】：

下午，

我已经编写了一些代码来将图像添加到页面中，并试图弄清楚如何在图像之间平滑过渡？这是代码。在这里坚持一个jquery值得吗？顺便说一句，我是一个新手，如果这很容易，我很抱歉这个愚蠢的问题..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Adweek</title>
        <style type="text/css">
        * {
            margin:0;
            padding:0;
            border:0;
        } 
        html, body, iframe {
            height:100%;
            width:100%;
            overflow:hidden; 
        }

        </style> 
        <script type="text/javascript"> 
            var pages = new Array(); //this will hold your pages
            pages[0] = 'page1.html';
            pages[1] = 'page2.html';
            pages[2] = 'page3.html';
            pages[3] = 'page4.html';
            pages[4] = 'page5.html';
            pages[5] = 'page6.html';
            pages[6] = 'page7.html';
            pages[7] = 'page8.html';
            pages[8] = 'page9.html';
            pages[9] = 'page10.html';
            pages[10] = 'page11.html';
            var time = 10; // set this to the time you want it to rotate in seconds   // do not edit 
            var i = 1;
            function setPage() {
                if(i == pages.length){
                     i = 0;  
                }
                document.getElementById('holder').setAttribute('src',pages[i]);
                i++; 
            } 
            setInterval("setPage()",time * 1000); // do not edit
        </script> 
    </head>   
    <body> 
        <iframe id="holder" src="page1.html" frameborder="0" scrolling="no"></iframe>
    </body>
</html>

【问题讨论】：

您的 setInterval 函数错误。让它 - setInterval(function(){setPage()},time * 1000); 这里：jsfiddle.net/754cm
请原谅我，但如果我制作的 index.js / index.css / index.html 会留下一个很小的缩略图并且它不会在幻灯片中缩放？
我不确定你的意思。但是，如果您将 setPage() 包含在 quotes 中 setInterval() 中，它将不会被调用。
这是我的错。我真的不明白如何做这些事情。甚至不知道我打算用 jsfiddle 做什么。假设只是从您提供的代码中制作 index.html / index.css / index.js ？对不起。
如果您想更改图像，为什么要使用 iframe？

标签： javascript jquery css iframe

【解决方案1】：

要顺利过渡到另一张图片，您需要使用以下步骤：

1) 将新图像加载到您要交换的图像后面。无论您是通过在 div 的背景中加载新图像还是通过克隆现有图像元素来执行此操作。

2) 淡出当前图像。这将从后面显示图像。

3) 清理 - 删除您在此过程中创建的任何多余元素或 css。

Example fiddle - 单击图像以加载下一个。

我已经对 JS 代码进行了注释，希望它可以让您修改代码以适合自己的目的。

(function() {
    "use strict";

    function swapImage(newIndex, preload) {
        var newImgSrc;
        var $img = $imgContainer.find('img');
        var imgIsAnimating = $img.is(':animated');

        if (!imgIsAnimating) {
            newImgSrc = images[newIndex];
            // Set background-image to new image
            $imgContainer.css({'background-image': 'url(' + newImgSrc + ')'});

            //Set data-index to the new index value
            $imgContainer.data('index', newIndex);

            // Fade old image
            $imgContainer.find('img').animate({ opacity: 0 }, function () {
                //** Callback upon fade animation completed **/
                imageSwapTidyUp(newImgSrc);
            });

        }
    }

    function imageSwapTidyUp(newImgSrc) {
        var $img = $imgContainer.find('img');
        // Change img src to new image
        $img.prop('src', newImgSrc);
        // Make img opaque
        $img.animate({ opacity: 1 }, 100);
    }

    function addArrayNextIndexSupport() {
        // Modify the Array object prototype, add nextIndex method
        if (!Array.prototype.nextIndex) {
            Array.prototype.nextIndex = function (currentIndex) {
                // currentIndex + 1 if in bounds, else 0
                return currentIndex < this.length - 1 ? currentIndex + 1 : 0;
            }
        }
    }

    //** On initialisation **//

    // Array holding all the images to be loaded
    var images = [
        'http://s30.postimg.org/8877xxo69/image.jpg',
        'http://s14.postimg.org/utnk4hm8h/image.jpg',
        'http://s22.postimg.org/4cy006wbl/firecat.jpg',
        'http://s27.postimg.org/456i0ge43/mad_baby.jpg'
    ];
    var $imgContainer;

    // Adds nextIndex to Array object
    addArrayNextIndexSupport();

    //** On DOM Ready **//
    $(function () {
        // Cache a reference to .img-container
        $imgContainer = $('.img-container');

        $imgContainer
            .data('index', 0) // Set data-index to 0 on init
            .on('click', function () {
                var newIndex = images.nextIndex($(this).data('index'));
                swapImage(newIndex);
            });
    });
}());

CSS

.img-container {
    background-repeat: no-repeat;
    background-position: top left;
    width: 620px;
    height: 465px;
}
.img-container img {
    display: block;
}

HTML

<div class="img-container">
    <img src="http://s30.postimg.org/8877xxo69/image.jpg" alt="">
</div>

【讨论】：

非常感谢迈克尔，这绝对是救生员。如果把这个丢给我，我的能力非常有限，但我是一群沃利中技术最高的！
这也救了我。我试图在(1 - opacity) 绘制第一张图像，然后在opacity 绘制下一张图像以获得一系列图像，但它在某些时候会变暗。您必须将背景设置为 100% 不透明度，然后在（在我的情况下）opacity = (percent / 100 * maxImgs) % 1 绘制下一张图像（其中百分比是您的距离，maxImgs 是您拥有的图像数量。谢谢你救了我很多时间