Question

我遇到的问题是，当我在一个元素的JavaScript中分配一个margin属性时，没有过渡效果。我已经找到了类似的问题，并且已经使用事件监听器进行了尝试。我也用setTimeout尝试了它并且它工作但不是我希望它工作。它应该是一个平滑的过渡，其中漂浮的图像高于当前值，并从按下按钮的一侧浮动。

在我的编辑器中，代码可以正常工作但没有转换。

var counter = 0;
var slides = [];
function scrollThrough(n) {
		alert("sd");
    slides = document.getElementsByClassName("img");
    if(counter + n < 0){
        counter = slides.length-1;
        slides[counter].style.transition = "none";
        slides[counter].style.marginLeft="100%";
        for(i = 0 ; i< slides.length ;i++){
            slides[i].style.zIndex = i;
        }
        slides[counter].style.transition = "all 0.5s linear";
        slides[counter].style.marginLeft ="0";
    }
    else if(counter + n > slides.length-1){
        counter = 0;
        slides[counter].style.transition = "none";
        slides[counter].style.marginLeft="-100%";
        for(i = 0 ; i< slides.length ;i++){
            slides[i].style.zIndex = slides.length-i;
        }
        slides[counter].style.transition = "all 0.5s linear";
        slides[counter].style.marginLeft ="0";
    }
    else{
        counter += n;
        slides[counter].style.transition = "none";
        slides[counter].style.marginLeft= (-n)*100+"%";
        slides[counter].style.zIndex = slides.length;
        slides[counter-n].style.zIndex = slides.length-1;
        for(i = 0 ; i< slides.length-2 ;i++){
            if(i == counter || i == counter-n){
            }
            else{
               slides[i].style.zIndex = i;
            }
        }
        slides[counter].style.transition = "all 0.5s linear";
        slides[counter].style.marginLeft ="0";
    }
}

#newsline{
    position: relative;
    padding-top: 60px;
    width: 100%;
    height: 400px;

}

.img{
    display: block;
    position: absolute;
    height: inherit;
    width: inherit;
    transition:all 0.5s linear;
}

#newsline a img{
    height: 400px;
    width: 100%; 
}

.move{
    z-index: 3;
    width: 100px;
    height: 100px;
    display: table;
    border-radius: 50px;
    margin-top: 150px;
    cursor: pointer;
    position: absolute;
    background-color: rgb(255, 255, 255,0.25) ;
}


.move:hover{
    background-color: rgb(255, 255, 255,0.6);
}

.move p{
    height: 100%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    color: rgb(250, 255, 255,0.7);
    font-size: 250%;
    background-color: none;
}

.move p:hover{
    color: darkslategrey;
}


.next{
    right: 6%;
}

.previous{
    left: 6%;
}

.one{
    z-index: 2;
}

.two{
    z-index: 1;
}

<body>
    <div id="newsline" >
            <div class="move next" onclick="scrollThrough(1)"><p>⮚</p></div>
            <div class="move previous" onclick="scrollThrough(-1)"><p>⮘</p></div>
            <a href="" class="img one"><img     src="https://www.planwallpaper.com/static/images/8ccb4ec4225b290726ae9be975220ff4.jpg"></a>
            <a href="" class="img two"><img src="https://www.planwallpaper.com/static/images/4362856-bleach-wallpaper-hd.jpg"></a>
</div>
</body>

在JavaScript中分配时，转换不起作用

0 个答案: