我误认为我的旋转木马不工作？

Posted

技术标签:

【中文标题】我误认为我的旋转木马不工作？【英文标题】：What i mistake my carousel not working? 【发布时间】：2018-03-24 12:50:22 【问题描述】：

在这里我想创建一个滑块。 当我的左键和右键单击时，我希望我的所有部分一一显示。 在这里，我已经完成了它们如何工作的代码，但我的部分没有显示内联首先我应该为此做什么，其次为什么我的代码不起作用。 在这里我展示了我的代码，请查看它。 我们将不胜感激。

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>

另外，我有两个按钮，一个是时间线，另一个是幻灯片。当我点击时间线时，它应该像下面的这张图片一样完美显示，但是当我点击我想要我的幻灯片时，我会制作下一个和上一个按钮，还有一些淡入淡出的左右动画效果。

这是我的图片

【问题讨论】：

您想隐藏除第一张幻灯片以外的所有元素吗？你也期待这种行为吗？ 是的，我应该怎么做，我也想要一些淡入左侧和淡出右侧的动画 【参考方案1】：

看来你错过了声明slideIndex

只需初始化var slideIndex = 1;检查下面的代码：

    var slideIndex = 1; // intialize slideIndex here
    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.opacity = "0";
            sliderData[i].classList.add('hide') 
            sliderData[i].classList.remove('active')  
        
        // sliderData[slideIndex-1].style.opacity = "1";
        sliderData[slideIndex-1].classList.remove('hide')
        sliderData[slideIndex-1].classList.add('active')
    
      div[type="timeline/slideshow"]
       height: 268px;
       overflow-y:hidden;
       overflow-x:auto;

  div[type="timeline/slideshow"] > section:not(.hide) 
        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;
    

  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:not(.hide)::after
    
        content: "";
        position: absolute;
        left: 50%;
        bottom: -55px;
        width: .2rem;
        background: grey;
        height: 55px;
    
    div[type="timeline/slideshow"] > section:not(.hide) > header 
        font-weight: 600;
        color: cadetblue;
        transform: translate(93px, 32px);
        font-size: 34px;
        font-family: arial;
        position: relative;
    
    div[type="timeline/slideshow"] > section:not(.hide) > article 
        transform: translate(87px,39px);
        color: black;
        font-size: 22px;
        font-family: arial;
        position: relative;
        padding: 10px;
        word-wrap: break-word;
    
    #slide section.sectionDiv + section.sectionDivopacity: 0;
    .active
        -webkit-animation: fadein 2s
        -moz-animation: fadein 2s; 
        -ms-animation: fadein 2s;
        -o-animation: fadein 2s; 
        animation: fadein 2s;
        opacity: 1 !important;
    
    .hideopacity: 0; min-height: 0 !important; margin: 0 !important;
    .hide header, .hide articledisplay: none;
    @keyframes fadein 
        0%  opacity: 0 
        50%  opacity: 0.5 
        100% opacity: 1
    
  <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>

【讨论】：

我该怎么做。你想隐藏除第一张幻灯片以外的所有元素吗？你也期待这种行为吗？ —— 看来您没有正确使用 jquery。所以我想你可以使用 css3 进行淡入淡出效果，并且为了隐藏东西最初隐藏除第一部分之外的所有部分。 你能更新我的代码吗？我试过但不起作用。 我已经更新了隐藏部分的代码。对于淡出淡出不确定我们可以使用display none 属性实现它，您可能需要更改opacity:0 并设置本节的容器 overflow: hidden 我很抱歉，但我无权使用任何部分标题文章 div 上的类。是否有另一种隐藏和显示部分的方法

以上是关于我误认为我的旋转木马不工作？的主要内容，如果未能解决你的问题，请参考以下文章

我如何将我的旋转木马放在中心位置？

猫头鹰旋转木马响应猫头鹰点工作奇怪

猫头鹰旋转木马不循环

旋转木马的小效果！

旋转木马的小效果！

旋转木马的小效果！