我的幻灯片代码存在问题,对我来说感觉就像一个非常愚蠢的问题:我不能让'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<String>
* 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幻灯片。我对此非常陌生,所以我非常感谢大家的帮助和耐心。
答案 0 :(得分:0)
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;