Question

查看此处的首页滑块：

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

正如你可以看到它的功能，它从图像转换到图像，与相应图像匹配的圆形变为不同的颜色......我唯一的问题是它不是'顺利。图像以丑陋的方式加载，让您看到背景图像，而不是图像本身。

有没有办法让fadeIn / fadeOut过渡平滑，所以他们看不到任何背景？我是否必须在页面加载时缓存所有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>

Answer 1

我会交换你的fadeOut和fadeIn，并在两张图片之间交替：

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

Answer 2

为什么重新发明轮子？试试this jquery plugin，它有一些可配置的选项，并且具有良好的浏览器支持。

如何使此滑块更平滑？

2 个答案: