Question

当我在第一张幻灯片上时，我试图制作一个滑块，“上一个”按钮消失，当它在最后一张幻灯片上时，“下一个”按钮消失。制作滑块的格式是使用php，forms和jscript。

以下是HTML ：

<form id="formstyle" target="frame" class="formstyle" method="post" action="saveRecord.php">

    <?php 
        while($row = mysqli_fetch_assoc($result)){  
        $i++;    
    ?>


<div class="imgdiv" <?php if ($i != 1) echo "style='display: none;'" ?>>

    <input type="hidden" name="<?php echo "SlideID".$i ?>" value="<?php echo $row['Id'] ?>">    
<input type="hidden" name="noRows" value="<?php echo $rowcount ?>">
<input type="hidden" name="i" value="<?php echo $i ?>"> 

    <?php 
      /*  for($a=0; $a<$row)*/
         $imgURL= "images/".$row['folderName']."/".$row['SlideImage'];

    ?>

        <section>
            <div class="sectionsides"></div>

            <div id="imagepage">
                <img id="imgshow" src="<?php echo $imgURL; ?>"><br>
            </div>

            <div class="sectionsides"></div>
        </section>
        <div id="navarea">

            <button id="upimg" type="button" class="button black display-left" onclick="plusDivs(-1);">

                <img class="upbutton" src="images/arrow-5.png" alt="logout" />

            </button>

            <article>
                <img class="enter" src="images/text.png">Enter description:
            </article>

            <button id="downimg" type="button" class="button black display-right" onclick="plusDivs(1);">

                <img class="downbutton" src="images/arrow-5.png" alt="logout" />


            </button>

        </div>


        <?php 

    $textvalue="";
    $checkText = "SELECT * FROM user where UserId='".$uid."' AND EventId='".$eid."' AND SpeakerId='".$sid."' AND Speaker_SlideId='".$row['Id']."'";
    $sltText = mysqli_query($con,$checkText) or die(mysqli_error());
    $textRow=mysqli_fetch_assoc($sltText);

    if(isset($textRow['Text']))
    {
            $textvalue=$textRow['Text'];
    }

        ?>


        <div id="descarea">
            <textarea rows="5" cols="20" name="<?php echo "textonly".$i ?>"><?php echo $textvalue; ?> </textarea>
        </div>
        <div id="buttonarea">
            <div class="thebuttons">
            <input type="submit" id="saveThis" value="Save" class="savin"/>
            </div>
            <div class="thebuttons">
            <input type="button" onclick="location.href='templateTextImage.php';" value="View All"/>
            </div>
        </div>

    </div>
    <?php

        }   

  ?>

</form>

以下是脚本：

    var imgpost = 0;
    var count;

    function plusDivs(obj) 
{

        var list = document.getElementsByClassName('imgdiv');           
        console.log(list.length);

        if (obj == 1) {
            if (imgpost == list.length - 1) {
                return;
            }
            list[imgpost].style.display = "none";
            list[++imgpost].style.display = "inline";
            $('.upbutton').hide();

        } else {

            if (imgpost == 0) {
                return;
            }
            list[imgpost].style.display = "none";
            list[--imgpost].style.display = "inline";
            $('.downbutton').hide();
        }   


        //alert ("imgpost="+ imgpost);
        document.getElementById("demo").innerHTML =imgpost +1;

        setcookie("TestCookie", 100, time() + (86400 * 30), '/'); // 86400 = 1 day      
        document.cookie = "count=" + imgpost;
        alert (document.cookie);
    }

如果不改变其他方法，是否仍然可以创建所需的效果？

Answer 1

我建议使用jQuery插件作为滑块，它可以根据需要提供所有内置功能。你可以隐藏下一个，上一个。在owl carousal中使用此类导航。

.disabled.owl-next{display:none;}
.disabled.owl-prev{display:none;}

这是我的最爱 - https://owlcarousel2.github.io/OwlCarousel2/

滑块第一页/最后一页隐藏按钮

1 个答案: