Javascript 函数在JQuery中给出未定义的错误
我正在尝试将滑块集成到我的应用程序中。 我指的是这个。 但由于某些原因，每当页面加载时，图像会出现一秒钟，然后消失，当我单击箭头或点时，我会得到函数未定义的错误，如下所示 未捕获引用错误：未定义plusSlides 在htmlanchorement.onclick（details.html:1） 任何帮助都将不胜感激，提前感谢。。。！！！ 请在下面找到我的代码Javascript 函数在JQuery中给出未定义的错误,javascript,jquery,html,arrays,slider,Javascript,Jquery,Html,Arrays,Slider,我正在尝试将滑块集成到我的应用程序中。 我指的是这个。 但由于某些原因，每当页面加载时，图像会出现一秒钟，然后消失，当我单击箭头或点时，我会得到函数未定义的错误，如下所示 未捕获引用错误：未定义plusSlides 在htmlanchorement.onclick（details.html:1） 任何帮助都将不胜感激，提前感谢。。。！！！ 请在下面找到我的代码 <!DOCTYPE html> <html> <head> <!--
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<title>Xylem</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Samuel Norton">
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,700,600,900' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.0.min.js"></script>
<style>
* {box-sizing:border-box}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body class="bgColor">
<div class="container-fluid">
<div>
<div>
<div>
<div class="productContent">
<a class="nextlinkProcuct"> ← GO BACK</a>
<div class="row containerDiv">
<div class="col-md-12 pd10-top pd10-bottom">
<div class="slideshow-container">
<!-- Next and previous buttons -->
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
</div>
<div class="col-md-12 title">360 View</div>
<div style="width: 400px;" class="col-md-4">
<script src='https://vizor.io/static/scripts/vizor-360-embed.js' data-vizorurl='https://vizor.io/embed/anamikabadal/americanorthcarolinamorrisville'></script>
<a href="#" data-rel="back"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
var i;
var detailsDataObj = {
"Title":"XYLEM WATER SOLUTIONS INDIA PVT LTD.",
"Description":"This page will aim to list all the high level modules and the functionality (use cases) for each module. Each module can be considered an EPIC and sub-bulleted use case as super-stories. Each Super-story will have stories that will be tracked in Jira and used for Sprint planning. This page will only list epics and super - stories.",
"sliderImage":["img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"],
"Image360":"images/testing.jpeg"
}
var titleDiv = '<div class="title col-md-12 pd10-top pd10-bottom centerText">'+ detailsDataObj.Title + '</div>'; // Create text with HTML
$(".containerDiv").append(titleDiv); // Append new elements
var pageDesc = '<div class="discription col-md-12 pd10-top pd10-bottom">'+ detailsDataObj.Description + '</div>';
$(".containerDiv").append(pageDesc); // Append new elements
var prevArrow = '<a class="prev" onclick="plusSlides(-1)">❮</a>';
var nextArrow = '<a class="next" onclick="plusSlides(1)">❯</a>';
for(i=0;i<detailsDataObj.sliderImage.length;i++){
var slideContainer = '<div class="mySlides fade">';
var img = '<img height="300" ';
img+='src="'+detailsDataObj.sliderImage[i]+'"';
img+='/>';
slideContainer+=img;
slideContainer+='</div>';
$('.slideshow-container').append(slideContainer);
}
$('.slideshow-container').append(prevArrow,nextArrow);
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";
}
});
</script>
</body>
</html>
木质部
*{框大小：边框框}
.mySlides{display:none}
/*幻灯片容器*/
.slideshow容器{
最大宽度：1000px；
位置：相对位置；
保证金：自动；
}
/*下一步和上一步按钮*/
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-22px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
}
/*标题文本*/
.文本{
颜色：#F2F2；
字体大小：15px；
填充：8px 12px；
位置：绝对位置；
底部：8px；
宽度：100%；
文本对齐：居中；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.active，.dot:悬停{
背景色：#717171；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
/*在较小的屏幕上，减小文本大小*/
@仅介质屏幕和（最大宽度：300px）{
.prev、.next、.text{font size:11px}
}
$（文档）.ready（函数（）{
var i；
var detailsDataObj={
“标题”：“二甲苯水溶液印度私人有限公司”，
“描述”：“本页面旨在列出所有高级模块和每个模块的功能（用例）。每个模块都可以被视为超级故事的史诗和子项目符号用例。每个超级故事都有将在Jira中跟踪并用于Sprint规划的故事。本页面仅列出史诗和超级故事。”，
“幻灯片图像”：[“img1.jpg”、“img2.jpg”、“img3.jpg”、“img4.jpg”、“img5.jpg”]，
“Image360”：“images/testing.jpeg”
}
var titleDiv=''+detailsDataObj.Title+''；//使用HTML创建文本
$（“.containerDiv”）.append（titleDiv）；//追加新元素
var pageDesc=''+detailsDataObj.Description+''；
$（“.containerDiv”）.append（pageDesc）；//追加新元素
var prevArrow='❮；'；
var nextArrow='❯；'；
对于（i=0；i slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；iplusSlides$.ready（函数）窗口window.plusSlides = function(n) {
showSlides(slideIndex += n)
}
plusSlides窗口onclick="plusSlides(-1)"
$(document).ready(function() {
//...
function plusSlides(n) {
showSlides(slideIndex += n);
}
//...
});
$(document).ready(function() {
//...
window.plusSlides = function (n) {
showSlides(slideIndex += n);
};
//...
});
$(document).ready(function() {
//...
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
//...