【问题标题】:Go to a specific slide on a slideshow with a button使用按钮转到幻灯片上的特定幻灯片
【发布时间】:2019-07-22 05:26:39
【问题描述】:

有没有一种方法可以让我通过按钮将我必须的幻灯片转到特定幻灯片,例如按下按钮,幻灯片将显示幻灯片 5?

我尝试按照另一个人的建议用onlick=showDivs(5) 制作一个按钮,但这似乎只是刷新了当前幻灯片,而不是显示第五张幻灯片

这是我的幻灯片代码:

<div>
    <img class="mySlides" src="1.jpg">
    <img class="mySlides" src="2.jpg">
    <img class="mySlides" src="3.jpg">
</div>
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">Previous</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">Next</button>
<script type="text/javascript">
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {slideIndex = 1} 
        if (n < 1) {slideIndex = x.length};
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none"; 
        }
        x[slideIndex-1].style.display = "block"; 
    }

    setInterval(function(){
        $('.mySlides').click()
    },1000)
</script>

【问题讨论】:

    标签: javascript slideshow


    【解决方案1】:

    你想这样写函数

    <script type="text/javascript">
    var slideIndex = 1;
    showDivs(index) {
     slideIndex = index;
    }
    
    function plusDivs(n) {
        showDivs(slideIndex += n);
    }
    
    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {slideIndex = 1} 
        if (n < 1) {slideIndex = x.length};
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none"; 
        }
        x[slideIndex-1].style.display = "block"; 
    }
    
    setInterval(function(){
        $('.mySlides').click()
    },1000)
    </script>
    

    【讨论】:

      【解决方案2】:

      我自己通过随机尝试找到了答案,最后我只是在一个简单的按钮上添加了“onclick="showDivs(slideIndex=5)”,它就起作用了

      【讨论】:

        猜你喜欢
        • 2021-08-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-11-23
        • 2015-04-21
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多