代码可以在Codepen中工作，但不能在我的计算机中工作 [英] Codes Work In Codepen But Don't Work In My Computer
本文介绍了代码可以在Codepen中工作，但不能在我的计算机中工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
最近，我在这里打开了一个问题：为什么我的Javascript幻灯片无法正常工作
Guys recently I have opened a question here: Why My Javascript Slideshow Doesnt Work Properly
在代码段中，我的代码在stackoverflow和Codepen中都可以正常工作，但在我的计算机中却没有。有人可以帮帮我吗？为什么它不起作用？
And in code snippet my codes work fine in stackoverflow and codepen but in my computer it doesnt. Can someone please help me? Why it is not working?
<html>
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
.nav{
width: 100%;
position: fixed;;
left: 0;
height:15%;
top:0px;
font-size:15px;
z-index:1000;
}
.a{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color:rgb(90, 76, 76);
}
.a:hover{
text-decoration: none;
border-bottom: 2px red solid;
color:rgb(129, 74, 129);
}
#aiki{
margin:3%;
}
#auc{
border-right: 30px solid transparent;
}
#adort{
border-left: 10px solid transparent;
}
#abir{
margin:3%;
}
.sag2{
position: absolute;
}
.sol{
position: absolute;
top:-5%;
margin-left:70%;
}
.as{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-left:15%;
color:white;
}
.a:hover{
text-decoration: none;
color:rgb(129, 74, 129);
}
.img1{
background-color: rgb(155, 151, 151);
position: absolute;
width: 100%;
height: 25%;
}
@media (max-width: 1000px) {
.a{
display: none;
}
}
#span{
color:white;
margin: 5%;
}
.slider{
position:relative;
overflow:hidden;
height: 100vh;
width: 100vw;
}
.slide{
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
opacity:0;
transition: opacity 0.4s ease-in-out;
}
.slide.current{
opacity:1;
}
.slide.current .content{
opacity: 1;
left:0;
transition: all 0.7s ease-in-out 0.3s;
}
.content{
position: absolute;
bottom: 70px;
left:-600px;
opacity:0;
width:600px;
background-color: rgb(255, 255, 255, 0.8);
color: #333333;
padding:35px;
}
.content h1{
margin-bottom: 10px;
}
#next{
position:absolute;
top:200px;
right:15px;
}
#prev{
position:absolute;
top:200px;
left:15px;
}
.buttons{
border: 2px solid #ffffff;
background-color: transparent;
color:#ffffff;
cursor:pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
transition: 1.5s;
}
.buttons:hover{
background-color: white;
color:black;
transition: 1.5s;
}
@media (max-width: 800px) {
.slide .content{
bottom:-300px;
left:0;
width:100%;
}
.slide.current .content{
transform: translateY(-300px);
}
}
.slide:first-child{
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(2){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(3){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(4){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(5){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
</style>
<body>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
document.getElementById("navs").style.transition = "2s";
document.getElementById("navs").style.height = "20%";
document.getElementById("sag2").style.transition = "2s";
document.getElementById("sag2").style.marginLeft = "20%";
document.getElementById("navs").style.backgroundColor = "white";
document.getElementById("sol").style.transition = "2s";
document.getElementById("sol").style.marginLeft = "40%";
//document.getElementById("sag2").style.left = "20%";
}else{
document.getElementById("navs").style.height = "15%";
document.getElementById("sag2").style.transition = "2s";
document.getElementById("sag2").style.marginLeft = "0%";
document.getElementById("navs").style.backgroundColor = "transparent";
document.getElementById("sol").style.transition = "2s";
document.getElementById("sol").style.marginLeft = "70%";
}
}
const slides = document.querySelectorAll(".slide");
const next = document.querySelector("#next");
const prev = document.querySelector("#prev");
const auto = true;
const invervalTime = 5000;
let slideInterval;
function nextslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for next slide
if(current.nextElementSibling){
//Add current to nextElementSibling
current.nextElementSibling.classList.add('current');
}else{
//Add current to start
slides[0].classList.add('current');
}
setTimeout(() => current.classList.remove('current'));
}
function prevslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for previous slide
if(current.previousElementSibling){
//Add current to previousElementSibling
current.previousElementSibling.classList.add('current');
}else{
//Add current to last
slides[slides.length - 1].classList.add('current')
}
setTimeout(() => current.classList.remove('current'));
}
//button events
next.addEventListener('click', e =>{
nextslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
prev.addEventListener('click', e =>{
prevslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
//autoplay
if(auto){
slideInterval = setInterval(nextslide, invervalTime);
}
</script>
<nav class="nav" id="navs">
<nav class="img1" id="imgg" ><span id="span">0 533 295 42 35</span><span id="span">blabla@gmail.com</span></nav>
<div class="as">
<div class="sag" id="sag2">
<a class="a" id="abir">sad</a>
<a class="a" id="aiki">sad</a>
</div>
<div class="sol" id="sol">
<a class="a" id="auc">sad</a>
<a class="a" id="adort">sad</a>
</div>
</div>
</nav>
<div class="slider">
<div id="firstcontent"class="slide current">
<div class="content">
<h1>Slide One</h1>
<p>Slide One's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Two</h1>
<p>Slide Two's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Third</h1>
<p>Slide Third's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Four</h1>
<p>Slide Four's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Five</h1>
<p>Slide Five's paraghrap</p>
</div>
</div>
</div>
<div class="button">
<button class="buttons"id="prev"><i class="fa fa-arrow-left"></i></button>
<button class="buttons"id="next"><i class="fa fa-arrow-right"></i></button>
</div>
</body>
</html>
推荐答案
经过一些测试，我弄清楚了。通过将javascript放在html之上， querySelector 看不到您的next / prev按钮，因此保存它们的变量实际上设置为 null 。
After some testing, I figured it out. By having the javascript ABOVE the html, querySelector wasn't seeing your next/prev buttons so the variables that held them were actually set as null. Simply moving the javascript to the bottom fixed this for me.
或将您的javascript包装在 window.onload = function（）中也可以解决此问题。
Or wrapping your javascript in window.onload = function() also will solve it.
<html>
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.nav{
width: 100%;
position: fixed;;
left: 0;
height:15%;
top:0px;
font-size:15px;
z-index:1000;
}
.a{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color:rgb(90, 76, 76);
}
.a:hover{
text-decoration: none;
border-bottom: 2px red solid;
color:rgb(129, 74, 129);
}
#aiki{
margin:3%;
}
#auc{
border-right: 30px solid transparent;
}
#adort{
border-left: 10px solid transparent;
}
#abir{
margin:3%;
}
.sag2{
position: absolute;
}
.sol{
position: absolute;
top:-5%;
margin-left:70%;
}
.as{
position: relative;
top:70%;
font-size: 20px;
text-decoration: none;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-left:15%;
color:white;
}
.a:hover{
text-decoration: none;
color:rgb(129, 74, 129);
}
.img1{
background-color: rgb(155, 151, 151);
position: absolute;
width: 100%;
height: 25%;
}
@media (max-width: 1000px) {
.a{
display: none;
}
}
#span{
color:white;
margin: 5%;
}
.slider{
position:relative;
overflow:hidden;
height: 100vh;
width: 100vw;
}
.slide{
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
opacity:0;
transition: opacity 0.4s ease-in-out;
}
.slide.current{
opacity:1;
}
.slide.current .content{
opacity: 1;
left:0;
transition: all 0.7s ease-in-out 0.3s;
}
.content{
position: absolute;
bottom: 70px;
left:-600px;
opacity:0;
width:600px;
background-color: rgb(255, 255, 255, 0.8);
color: #333333;
padding:35px;
}
.content h1{
margin-bottom: 10px;
}
#next{
position:absolute;
top:200px;
right:15px;
}
#prev{
position:absolute;
top:200px;
left:15px;
}
.buttons{
border: 2px solid #ffffff;
background-color: transparent;
color:#ffffff;
cursor:pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
transition: 1.5s;
}
.buttons:hover{
background-color: white;
color:black;
transition: 1.5s;
}
@media (max-width: 800px) {
.slide .content{
bottom:-300px;
left:0;
width:100%;
}
.slide.current .content{
transform: translateY(-300px);
}
}
.slide:first-child{
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(2){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(3){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(4){
background-image:url("https://www.gladsos.com.tr/wp-content/uploads/2019/01/gladsos-slider-vr.jpg") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.slide:nth-child(5){
background-image:url("https://source.unsplash.com/RyRpq9SUwAU/1600x900") ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<nav class="nav" id="navs">
<nav class="img1" id="imgg" ><span id="span">0 533 295 42 35</span><span id="span">blabla@gmail.com</span></nav>
<div class="as">
<div class="sag" id="sag2">
<a class="a" id="abir">sad</a>
<a class="a" id="aiki">sad</a>
</div>
<div class="sol" id="sol">
<a class="a" id="auc">sad</a>
<a class="a" id="adort">sad</a>
</div>
</div>
</nav>
<div class="slider">
<div id="firstcontent"class="slide current">
<div class="content">
<h1>Slide One</h1>
<p>Slide One's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Two</h1>
<p>Slide Two's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Third</h1>
<p>Slide Third's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Four</h1>
<p>Slide Four's paraghrap</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>Slide Five</h1>
<p>Slide Five's paraghrap</p>
</div>
</div>
</div>
<div class="button">
<button class="buttons"id="prev"><i class="fa fa-arrow-left"></i></button>
<button class="buttons"id="next"><i class="fa fa-arrow-right"></i></button>
</div>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
document.getElementById("navs").style.transition = "2s";
document.getElementById("navs").style.height = "20%";
document.getElementById("sag2").style.transition = "2s";
document.getElementById("sag2").style.marginLeft = "20%";
document.getElementById("navs").style.backgroundColor = "white";
document.getElementById("sol").style.transition = "2s";
document.getElementById("sol").style.marginLeft = "40%";
//document.getElementById("sag2").style.left = "20%";
}else{
document.getElementById("navs").style.height = "15%";
document.getElementById("sag2").style.transition = "2s";
document.getElementById("sag2").style.marginLeft = "0%";
document.getElementById("navs").style.backgroundColor = "transparent";
document.getElementById("sol").style.transition = "2s";
document.getElementById("sol").style.marginLeft = "70%";
}
}
const slides = document.querySelectorAll(".slide");
const next = document.querySelector("#next");
const prev = document.querySelector("#prev");
const auto = true;
const invervalTime = 5000;
let slideInterval;
function nextslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for next slide
if(current.nextElementSibling){
//Add current to nextElementSibling
current.nextElementSibling.classList.add('current');
}else{
//Add current to start
slides[0].classList.add('current');
}
setTimeout(() => current.classList.remove('current'));
}
function prevslide(){
//Get current class
const current = document.querySelector('.current');
//Remove current class
current.classList.remove('current')
//Check for previous slide
if(current.previousElementSibling){
//Add current to previousElementSibling
current.previousElementSibling.classList.add('current');
}else{
//Add current to last
slides[slides.length - 1].classList.add('current')
}
setTimeout(() => current.classList.remove('current'));
}
//button events
next.addEventListener('click', e =>{
nextslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
prev.addEventListener('click', e =>{
prevslide();
if(auto){
clearInterval(slideInterval)
slideInterval = setInterval(nextslide, invervalTime);
}
});
//autoplay
if(auto){
slideInterval = setInterval(nextslide, invervalTime);
}
</script>
</body>
</html>
这篇关于代码可以在Codepen中工作，但不能在我的计算机中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
