这里我想创建一个滑块。
在其中,当我的左键和右键单击时,我希望我的“所有”部分逐个显示。
在这里,我已经编写了它们如何工作的代码,但我的部分没有内联显示,首先,我应该为此做些什么,其次,为什么我的代码不工作。
这里我展示了我的代码,请检查一下。
我们将不胜感激。
var ct = document.getElementById('slide');
ct.insertAdjacentHTML("afterbegin",'<a class="left color_arrow carousel-control" href="#myCarousel" onclick="plusDivs(-1)" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>');
ct.insertAdjacentHTML('afterbegin',' <a class="right color_arrow carousel-control" href="#myCarousel" onclick="plusDivs(1)" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>');
function plusDivs(sliderItem) {
showDivs(slideIndex += sliderItem);
}
function showDivs(sliderItem) {
let i;
let sliderData = document.getElementsByTagName("section");
if (sliderItem > sliderData.length) {slideIndex = 1}
if (sliderItem < 1) {slideIndex = sliderData.length}
for (i = 0; i < sliderData.length; i++) {
sliderData[i].style.display = "none";
}
sliderData[slideIndex-1].style.display = "block";
}
div[type="timeline/slideshow"] > section {
margin: auto;
width: 900px;
z-index: 100;
border-left: 4px solid #00BCD4;
min-height:250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: relative;
top: 50px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
-webkit-animation: fadein 2s
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
div[type="timeline/slideshow"]::before
{
content: "";
position: absolute;
top: 0;
left: 50%;
bottom: 0;
width: .2rem;
background: white;
height: 55px;
}
div[type="timeline/slideshow"]>section::after
{
content: "";
position: absolute;
left: 50%;
bottom: -55px;
width: .2rem;
background: grey;
height: 55px;
}
div[type="timeline/slideshow"] > section> header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
}
div[type="timeline/slideshow"] > section> article {
transform: translate(87px,39px);
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
<div type="timeline/slideshow" id="slide">
<section class='sectionDiv'>
<header>Event One</header>
<article>Write Something Here</article>
</section>
<section class='sectionDiv'>
<header>Event Two</header>
<article>Write Something Here</article>
</section>
<section class='sectionDiv'>
<header>Event Three</header>
<article>Write Something Here</article>
</section>
<section class='sectionDiv'>
<header>Event Four</header>
<article>Write Something Here</article>
</section>
</div>
另外,我有两个按钮,一个是日程表,另一个是幻灯片。当我点击时间线时,它应该会像下面这样完美地显示,但当我点击我想要的幻灯片时,我会制作下一个和上一个按钮,也会制作一些淡出的左右动画。
这是我的照片
