0

看看这里的首页滑块：

http://wildwoodtreeservices.wordpress.redcow.ca/

正如您所看到的，它的功能是从图像转换到图像，并且与相应图像匹配的圆圈会变为不同的颜色……我唯一的问题是它不平滑。图像以丑陋的方式加载，让您在一瞬间看到背景图像而不是图像本身。

有什么方法可以使淡入/淡出过渡平滑，因此他们看不到任何背景？我是否必须在页面加载时缓存所有 11 个图像？

提前致谢

我的 JS：

<script>
    var sliderpics = [];
    sliderpics[0] = "/wp-content/themes/REDCOW-WP/slider1.jpg";
    sliderpics[1] = "/wp-content/themes/REDCOW-WP/slider2.jpg";
    sliderpics[2] = "/wp-content/themes/REDCOW-WP/slider3.jpg";
    sliderpics[3] = "/wp-content/themes/REDCOW-WP/slider4.jpg";
    sliderpics[4] = "/wp-content/themes/REDCOW-WP/slider5.jpg";
    sliderpics[5] = "/wp-content/themes/REDCOW-WP/slider6.jpg";
    sliderpics[6] = "/wp-content/themes/REDCOW-WP/slider7.jpg";
    sliderpics[7] = "/wp-content/themes/REDCOW-WP/slider8.jpg";
    sliderpics[8] = "/wp-content/themes/REDCOW-WP/slider9.jpg";
    sliderpics[9] = "/wp-content/themes/REDCOW-WP/slider10.jpg";
    sliderpics[10] = "/wp-content/themes/REDCOW-WP/slider11.jpg";

    var currentImage = 0;
    var currentCircle = 0;

    function changeSliderImage() {
        currentImage++;
        currentCircle++;
        if(currentImage > 10) currentImage = 0;
        if(currentCircle > 10) currentCircle = 0;

        $("#sliderpic").fadeOut(200, function() {
            $(this).attr("src",sliderpics[currentImage]);
            $("#circle" + currentCircle).attr("src","/wp-content/themes/REDCOW-WP/circle_active.png");
            $("#circle" + (currentCircle - 1)).attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png");
            if(currentCircle == 0){
                $("#circle10").attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png");
            }
        });
        $("#sliderpic").fadeIn(200);

        setTimeout(changeSliderImage, 5000);
    }

    $(document).ready(function($) {
        setTimeout(changeSliderImage, 5000);
    });

</script>
4

2 回答 2

1

我会交换你的淡出和淡入，并在两个图像之间交替：

HTML：

<img id="sliderpic0" class="sliderpic" alt="slider pic 1" src="[src]" style="display: inline;">
<img id="sliderpic1" class="sliderpic" alt="slider pic 1" src="[src]" style="display: inline;">

Javascript：

function changeSliderImage(bleh) {
    currentImage++;
    currentCircle++;
    if(currentImage > 10) currentImage = 0;
    if(currentCircle > 10) currentCircle = 0;

    var elemone = (bleh) ? $("#sliderpic0") : $("#sliderpic1");
    var elemtwo = (bleh) ? $("#sliderpic1") : $("#sliderpic0");

    $(elemone).fadeIn(200);
    $(elemtwo).fadeOut(200, function() {
        $(this).attr("src",sliderpics[currentImage]);
        $("#circle" + currentCircle).attr("src","/wp-content/themes/REDCOW-WP/circle_active.png");
        $("#circle" + (currentCircle - 1)).attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png");
        if(currentCircle == 0){
            $("#circle10").attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png");
        }
    });

    setTimeout(changeSliderImage(!bleh), 2000);
}

真快脑筋急转弯，应该能解决你的问题！:)

编辑：哦，将您的 document.ready 函数更改为如下所示：

$(document).ready(function($) {
    setTimeout(changeSliderImage(true), 2000);
});
于 2013-05-30T15:28:49.500 回答
0

为什么要重新发明轮子？试试这个 jquery 插件，它有大量的可配置选项并且有很好的浏览器支持。

于 2013-05-30T15:16:29.033 回答