此代码出现错误('Uncaught SyntaxError: Unexpected identifier' -- index.html:1):
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="code.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<header>
<div class="bgImg0" id="header">
<div id="carousel-dots" class="bg-dark txt-center">
<div class="dot bg-base-color pointer fast-tr" id="selected_dot"></div>
<div class="dot bg-base-color pointer fast-tr"></div>
<div class="dot bg-base-color pointer fast-tr"></div>
<div class="dot bg-base-color pointer fast-tr"></div>
<div class="dot bg-base-color pointer fast-tr"></div>
</div>
</div>
</header>
</body>
</html>
CSS
:root {
--main-color1: #CCA43B;
--base-color: dodgerblue;
--dark: #363636;
--slow-tr: all 0.5s linear;
}
html, body, header {
width: 500px;
height: 500px;
}
#header {
width: 500px;
height: 200px;
background-color: var(--dark);
}
#header::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
-webkit-transition: var(--slow-tr);
-moz-transition: var(--slow-tr);
-ms-transition: var(--slow-tr);
-o-transition: var(--slow-tr);
transition: var(--slow-tr);
}
#carousel-dots {
height: 30px;
}
.dot {
margin: 0 5px;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
opacity: 0.4;
}
.dot:hover {
opacity: 1;
background-color: var(--main-color1);
}
#selected_dot {
opacity: 1;
}
#header.bgImg0::before {
background-color: red;
}
#header.bgImg1::before {
background-color: orange;
}
#header.bgImg2::before {
background-color: green;
}
#header.bgImg3::before {
background-color: purple;
}
#header.bgImg4::before {
background-color: yellowgreen;
}
.bg-base-color {
background-color: var(--base-color);
}
.pointer {
cursor: pointer;
}
.txt-center {
text-align: center;
}
JS
var header_element;
var selected_dot;
var headerCarousel_flag = {
value: 0
};
$(document).ready(function(){
header_element = document.getElementById("header");
selected_dot = document.getElementsByClassName("dot");
var j = 0;
for(; j < 5 ; j++){
selected_dot[j].setAttribute("onclick", "next('header', " + headerCarousel_flag + ", 'bgImg')");
}
Carousel(header_element, headerCarousel_flag, 'bgImg');
});
function Carousel(element, flag, class_name){
var element_id = $(element).attr('id');
if(flag.value == 0){
next(element_id, flag, class_name);
}
else if(flag.value == 1){
next(element_id, flag, class_name);
}
else if(flag.value == 2){
next(element_id, flag, class_name);
}
else if(flag.value == 3){
next(element_id, flag, class_name);
}
else {
next(element_id, flag, class_name);
}
setTimeout(function(){
Carousel(element, flag, class_name);
}, 3000);
}
function next(element_id, flag, class_name){
var element_obj = document.getElementById(element_id);
element_obj.className = class_name + flag.value;
resetIDs();
selected_dot[flag.value].id = "selected_dot";
flag.value++;
if(flag.value == 5) flag.value = 0;
}
function resetIDs(){
var i = 0;
for(; i < 5; i++){
selected_dot[i].id = "";
}
}
很抱歉粘贴了一大段代码，但此时我真的不确定哪里出了问题。
事情是这样的，我正在制作一种改变背景颜色的旋转木马，它应该在 3 秒后改变(就像现在一样)，而且当用户点击 div代表一个点。当我点击它时出现错误，但没有任何反应，它继续每 3 秒更改一次。所以我想我可能传递了错误的参数(虽然我想我会得到一个不同的错误消息)。 有鹰眼看到我遗漏了什么吗？
最佳答案
您将字符串作为参数传递，而您的代码需要一个函数
selected_dot[j].setAttribute("onclick", "next('header', " + headerCarousel_flag + ", 'bgImg')");
是你的罪魁祸首
selected_dot[j].addEventListener('click', function() {
next('header', headerCarousel_flag, 'bgImg');
})
应该修复它。
这段代码没有按照您的意愿执行，但它确实解决了您当前的错误。
关于javascript - JS 轮播 - 未捕获的语法错误 : Unexpected identifier，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46585635/