Question

下午，

我已经制作了一些代码来将图像添加到页面中，并试图找出如何在图像之间平滑过渡？这是代码。是不是值得坚持在这里的jquery？我是一个新手btw所以很抱歉愚蠢的问题，如果它很容易..

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

Answer 1

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

1）将新图像加载到您想要交换的图像后面。是否通过在div上的背景中加载新图像，或通过克隆现有图像元素来执行此操作。

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

3）清理 - 删除您在此过程中创建的所有冗余元素或CSS。

Example fiddle - 点击图片以使下一个图片加载。

我已经对JS代码进行了评论，希望它允许您修改代码以适合您自己的目的。

<强> 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 个答案: