幻灯片中的功能失调的prev按钮

时间:2018-02-22 07:12:52

标签: javascript html css slideshow

我的幻灯片代码存在问题,对我来说感觉就像一个非常愚蠢的问题:我不能让'prev'按钮工作。如果我点击,没有任何反应。 “下一个”按钮完成它应该做的事情。我认为它与我的javascript有关,其中我的知识非常非常有限(意思是:没有线索)。

/**
 * Retrieves any string data located between the supplied string leftString
 * parameter and the supplied string rightString parameter.<br><br>
 *
 * This method will return all instances of a substring located between the
 * supplied Left String and the supplied Right String which may be found
 * within the supplied Input String.<br>
 *
 * @param inputString (String) The string to look for substring(s) in.
 *
 * @param leftString (String) What may be to the Left side of the substring we want 
 * within the main input string.
 *
 * @param rightString (String) What may be to the Right side of the substring we want 
 * within the main input string..
 *
 * @param options (Optional - Boolean - 2 Parameters):<pre>
 *
 *      ignoreLetterCase    - Default is false. This option works against the
 *                            string supplied within the letString parameter
 *                            and the string supplied within the rightString
 *                            parameter. If set to true then letter case is
 *                            ignored when searching for strings supplied in
 *                            these two parameters. If left at default false
 *                            then letter case is not ignored.
 *
 *      trimFound           - Default is true. By default this method will trim
 *                            off leading and trailing white-spaces from found
 *                            sub-string items. General sentences which obviously
 *                            contain spaces will almost always give you a white-
 *                            space within an extracted sub-string. By setting
 *                            this parameter to false, leading and trailing white-
 *                            spaces are not trimmed off before they are placed
 *                            into the returned Array.</pre>
 *
 * @return (1D String Array) Returns a Single Dimensional String Array
 * containing all the sub-strings found within the supplied Input String
 * which are between the supplied Left String and supplied Right String.
 * You can shorten this method up a little by returning a List&lt;String&gt;  
 * ArrayList and removing the 'List to 1D Array' conversion code at the end 
 * of this method. This method initially stores its findings within a List 
 * object anyways.
 */
public static String[] getBetween(String inputString, String leftString, String rightString, boolean... options) {
    // Return nothing if nothing was supplied.
    if (inputString.equals("")) {
        return null;
    }

    // Prepare optional parameters if any supplied.
    // If none supplied then use Defaults...
    boolean ignoreCase = false; // Default.
    boolean trimFound = true;   // Default.
    if (options.length > 0) {
        if (options.length >= 1) {
            ignoreCase = options[0];
        }
        if (options.length >= 2) {
            trimFound = options[1];
        }
    }

    // Remove any ASCII control characters from the
    // supplied string (if they exist).
    String modString = inputString.replaceAll("\\p{Cntrl}", "");

    // Establish a List String Array Object to hold
    // our found substrings between the supplied Left
    // String and supplied Right String.
    List<String> list = new ArrayList<>();

    /// Use Pattern Matching to locate our possible
    // substrings within the supplied Input String.
    String regEx = Pattern.quote(leftString) + "(.*?)" + Pattern.quote(rightString);
    if (ignoreCase) { regEx = "(?i)" + regEx; }
    Pattern pattern = Pattern.compile(regEx);
    Matcher matcher = pattern.matcher(modString);
    while (matcher.find()) {
        // Add the found substrings into the List.
        String found = matcher.group(1);
        if (trimFound) {
            found = found.trim();
        }
        list.add(found);
    }

    String[] res;
    // Convert the ArrayList to a 1D String Array.
    // If the List contains something then convert
    if (list.size() > 0) {
        res = new String[list.size()];
        res = list.toArray(res);
    } // Otherwise return Null.
    else {
        res = null;
    }
    // Return the String Array.
    return res;
}
var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
    showSlides(slideIndex += n);}

    function currentSlide(n) {
    showSlides(slideIndex = n);}

    function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";   }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", ""); }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";}
.mySlides {display: none}
    img {vertical-align: middle;
    }


    .slideshow-container {
    width: 100%;
    hight: 100%;
    position: relative;
    margin: auto; 
    }

    .active, .dot:hover {
    background-color: #717171;
    }

    .prev {
    cursor: pointer;
    position: absolute;
    left:5px;
    margin-lift: 5px;
    }

    .next {
    cursor: pointer;
    position: absolute;
    right:5px;
    margin-right: 5px;
    }

整个代码基于一个简单的w3schools幻灯片。我对此非常陌生,所以我非常感谢大家的帮助和耐心。

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
function init(){
    ul = document.getElementById('image_slider');
    liItems = ul.children;
    imageNumber = liItems.length;
    imageWidth = liItems[0].children[0].clientWidth;
    // set ul's width as the total width of all images in image slider.
    ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
    prev = document.getElementById("prev");
    next = document.getElementById("next");
    /*.onclike = onClickPrev() will be fired when onload; is this because closure?? */
    prev.onclick = function(){ onClickPrev();};
    next.onclick = function(){ onClickNext();};
}
&#13;
.nvgt{
    position:absolute;
    top: 120px;
    height: 50px;
    width: 30px;
    opacity: 0.6;
}
.nvgt:hover{
    opacity: 0.9;
}
#prev{
    background: #000 url('./image/prev.png') no-repeat center;
    left: 0px;
}
#next{
    background: #000 url('./image/next.png') no-repeat center;
    right: 0px;
}
&#13;
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="Image-Slider-LnR.js"></script>
    <link rel="stylesheet" type="text/css" href="Image-Slider-LnR.css">
</head>
<body>
    <div class="container">
        <div class="slider_wrapper">
            <ul id="image_slider">
                <li><img src="./image/1.jpg"></li>
                <li><img src="./image/4.jpg"></li>
                <li><img src="./image/5.jpg"></li>
                <li><img src="./image/4.jpg"></li>
                <li><img src="./image/1.jpg"></li>
                <li><img src="./image/5.jpg"></li>
            </ul>                   
            <span class="nvgt" id="prev"></span>
            <span class="nvgt" id="next"></span>
        </div>
    </div>
</body>
</html>
&#13;
&#13;
&#13;