0
私は使用できるカルーセルを提供する多くのウェブサイトを見てきましたが、私のウェブサイトでは何も動作しないようです配列にイメージを格納すると、それらを二重循環リンクリストに格納して最初にループバックすることができました。私は循環リンクリストを書く方法を知っていますが、私はJavaScriptを初めて使っているので、可能ならばどうすればそれをやることができるのか分かりません。私は、JavaScriptで二重循環リンクリストを構築するための助けが必要です。私は現在リンクされているリストを持っていないので、JavaScriptで書く方法を理解しようとしています。私のコードは以下の通りです。カルーセルループを最初の写真に戻すように二重環状リンクリストを設計する方法
HTML
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<style>
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.photoSection {
position: relative;
background-color: black;
overflow: hidden;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.8s;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center;">Some Title</h1></a>
<style>
a{text-decoration: none}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
</a>
<a class = "Instagram">
<a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
</a>
<a class = "Youtube">
<a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
<div class="photoSection">
<img class="mySlides" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" style="width:100%; height:785px;">
<img class="mySlides" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" style="width:100%; height: 785px">
<img class="mySlides" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" style="width:100%; height: 785px">
</div>
<div class="section1" style = "background-color: black; color: white; padding-top: 150px;" >
<a class = "header1" style="padding-left: 200px; display:inline-block; width:85.2%">
<img src = "FoldingIcon.PNG">
<h1 style = "font-family: Verdana;font-size: x-large; text-align: start;">Some Title</h1>
<p style = "margin-bottom: 200px; font-family: Verdana; color: gray;">
</p>
<img src="Backpack.PNG">
<h2 style = "font-family: Verdana; font-size: x-large; text-align:start">Some Title</h2>
<p style = "margin-bottom: 300px"></p>
</a>
<p style = "color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%">
____________________________________________________________________________________________________________________________________________________________</p>
</div>
<div class = "section2" style = "background-color: black; color: white; padding-bottom: 500px;">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
myIndex++;
if (myIndex > x.length) {
myIndex = 1
x[myIndex - 1].style.right;
}
else {
x[myIndex - 1].style.left = "0";
}
// you may want to add transition-delay , z-index, ... to tune sliding effect
setTimeout(carousel, 4000); // Change image every 2 seconds
}
</script>
_ "**二重循環リンクリスト**" _ですか？ – hungerstar
あなたは確かに、リンクされたリストではありません。 –
私は、適切な名前は、円形またはリングバッファーだと思う：https://en.wikipedia.org/wiki/Circular_buffer – duffymo