Question

我的代码中有一个滑块，需要转换，但不起作用。

这是JS代码它也不适用于CSS ...... 它需要在图像变化时进行转换。我需要在滑块中慢慢更换图像。

实际上我在js中试过这个：

        <div class="photo_div">
            <img id="img" src="">
        </div>
        <button onclick="prev()">PREV</button>
        <button onclick="next()">NEXT</button>
    </div>

这是HTML

var names = ["img1.jpg", "img2.jpg", "img3.jpg"];
var index = 0;

function init() {
    document.getElementById("img").src = "photo/" + names[index];
    autoSlide();
}

function next() {
    index++;
    if (index == names.length) {
        index = 0;
    }
    document.getElementById("img").src = "photo/" + names[index];
    

}

function prev() {

    if (index == 0) {
        index = names.length
    }
    index--;

    document.getElementById("img").src = "photo/" + names[index];

}

function autoSlide() {
    if (index < names.length) {
        setInterval(function() {
        	next();
        }, 3000);
    }
}

这是JS

def calcArea
  getWidth * getHeight
end

def getWidth
  @w
end
def getHeight
  @h
end
@w = 10
@h = 20

p calcArea

Answer 1

在next和prev函数中淡出图像 - 并将排队设置为true，然后更改图像，然后淡化img标记。

您可以尝试以下内容，以及类似于prev的内容：

＆＃13;

function next() {
    index++;
    if (index == names.length) {
        index = 0;
    }
    
    $('#img').fadeOut("slow", "linear", function(){
      document.getElementById("img").src = "photo/" + names[index];
       $('#img').fadeIn("slow", "linear");
    });
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如果你不能使用jQuery，可以查看this。

滑块中的CSS JS转换

1 个答案: