Question

我正在尝试显示淡入淡出滑块。这是带有静态html代码的幻灯片放映代码：

var slider = document.getElementById("slider");
var slideArray = slider.getElementsByTagName("li");
var slideMax = slideArray.length - 1;
var curSlideNo = 0;
var nextSlideNo =null;
var fadeStart = false;
var curSlideLevel = 1;
var nextSlideLevel = 0;

for (i = 0; i <= slideMax; i++) {
    if (i === curSlideNo) changeOpacity(slideArray[i], 1);
    else changeOpacity(slideArray[i], 0);
}

function startSlide(dir)
{
    if (fadeStart === true) return;
    if( dir === "prev" )
    {
        nextSlideNo = curSlideNo - 1;
        if ( nextSlideNo < 0 ) nextSlideNo = slideMax;
    }
    else if( dir === "next" )
    {
        nextSlideNo = curSlideNo + 1;
        if ( nextSlideNo > slideMax ) nextSlideNo = 0;
    }
    else
    {
        fadeStart = false;
        return;
    }
    fadeStart = true;
    changeOpacity(slideArray[curSlideNo], curSlideLevel);
    changeOpacity(slideArray[nextSlideNo], nextSlideLevel);
    fadeInOutAction(dir);
}

function fadeInOutAction(dir)
{
    curSlideLevel = curSlideLevel - 0.1;
    nextSlideLevel = nextSlideLevel + 0.1;
    if( curSlideLevel <= 0 )
    {
        changeOpacity(slideArray[curSlideNo], 0);
        changeOpacity(slideArray[nextSlideNo], 1);
        if(dir === "prev")
        {
            curSlideNo = curSlideNo - 1;
            if (curSlideNo < 0) curSlideNo = slideMax;
        }
        else
        {
            curSlideNo = curSlideNo + 1;
            if (curSlideNo > slideMax) curSlideNo = 0;
        }
        curSlideLevel = 1;
        nextSlideLevel = 0;
        fadeStart = false;
        return;
    }
    changeOpacity(slideArray[curSlideNo], curSlideLevel);
    changeOpacity(slideArray[nextSlideNo], nextSlideLevel);
    setTimeout(function () {
        fadeInOutAction(dir);
    }, 100);
}

function changeOpacity(obj,level)
{
    obj.style.opacity = level;
    obj.style.MozOpacity = level;
    obj.style.KhtmlOpacity = level;
    obj.style.MsFilter = "'progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (level * 100) + ")'";
    obj.style.filter = "alpha(opacity=" + (level * 100) + ");";
}

var autoslider = setInterval( function(){startSlide('next');}, 1000);
autoslider;

实际上，当html代码像这样时，此代码可以正常工作

   <ul id="slider">
        <li><img src="images/cafe.png"/></li>
        <li><img src="images/cafe2.png"/></li>
        <li><img src="images/cafe3.png"/></li>
    </ul>

但是可以更改或添加来自服务器的图像。
因此，我认为使其动态化会更好。
这是添加的代码

if(xhr.readyState===XMLHttpRequest.DONE){
        if(xhr.status===200){
            var test=xhr.response.replace(/["]/g,'');
            test= test.substring(1,test.length-1);
            let test2=test.split(",");
            alert(test2);

            let lis=document.createElement("li");

            for(var i=0; i<test2.length; ++i){
                let imgNode=document.createElement("img");
                imgNode.setAttribute("src", url+test2[i]);
                lis.appendChild(imgNode);
            }
            document.getElementById("slider").appendChild(lis);

        }else{
            alert(`:'(`);
        }
    }

但是这次，它不起作用。
没有幻灯片显示，但图像垂直列出。
我怎么做这个幻灯片放映？我应该编辑什么？

如何使用从数组生成的列表项制作图像滑块

0 个答案: