我如何制作这个幻灯片？

Posted

技术标签:

【中文标题】我如何制作这个幻灯片？【英文标题】：How do i make this slideshow? 【发布时间】：2022-01-16 00:36:59 【问题描述】：

我正在尝试复制此代码：https://codepen.io/jcoulterdesign/embed/arQoER?default-tab=result&editable=true&theme-id=dark 它对我来说太先进了，所以我希望当我点击每张图片时都有一个动画并随着内容淡入淡出。 代码不是响应式的，如果我添加更多内容它不是动态的，它会停止工作，因为它基于索引 我的来源https://codepen.io/m-rio-renato/pen/dyVOyKq

    $(document).ready(function ()
    
    //Quando se carrega no Botão animação acontece
    $('button').click(function()
        $(this).toggleClass('btn-anim');
    );

    $('.slide_horizontal__slider').click(function()
        var slide_contagem = 700;
        var slide_time = 500;
        var slide_index = $(this).index();

        if(slide_index <= 1)
            if(slide_index === 0)
                $('.slide_horizontal__slider__image__content').stop().fadeOut();
                $('.slide_horizontal__slider').stop().animate('left': slide_contagem , slide_time, function()
                    $('.slide_horizontal__slider__image__content').eq(slide_index).fadeIn(slide_time);
                );
            
            if(slide_index === 1)
                $('.slide_horizontal__slider__image__content').stop().fadeOut();
                $('.slide_horizontal__slider').stop().animate('left': 0 , slide_time, function()
                    $('.slide_horizontal__slider__image__content').eq(slide_index).fadeIn(slide_time);
                );
            
        else
            if(slide_index === 2)
                $('.slide_horizontal__slider__image__content').stop().fadeOut();
                $('.slide_horizontal__slider').stop().animate('left': -slide_contagem , slide_time, function()
                    $('.slide_horizontal__slider__image__content').eq(slide_index).fadeIn(slide_time);
                );
            
            if(slide_index === 3)
                $('.slide_horizontal__slider__image__content').stop().fadeOut();
                $('.slide_horizontal__slider').stop().animate('left': -slide_contagem*2 , slide_time, function()
                    $('.slide_horizontal__slider__image__content').eq(slide_index).fadeIn(slide_time);
                );
            
            if(slide_index === 4)
                $('.slide_horizontal__slider__image__content').stop().fadeOut();
                $('.slide_horizontal__slider').stop().animate('left': -slide_contagem*3 , slide_time, function()
                    $('.slide_horizontal__slider__image__content').eq(slide_index).fadeIn(slide_time);
                );
            
        
    );
    
    
);
/*
TODOS OS DIREITOS RESERVADOS 2021
Mário Renato Teixeira aka FuZz3
*/

/*==================        RESET DE MARGENS        ==================*/

*, html, body, h1, h2, h3, h4, h5, h6, p, figure, img, video, svg, article, main, section, aside, div, ol, ul, il, table, input, nav, footer, header
box-sizing: border-box; margin: 0;text-decoration: none;

/*
==============================
            FONTES
==============================
*/

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800&display=swap');

/*
==============================
            CORES
==============================
*/

:root
    --branco: #FBFBFB;
    --preto: #30323D;
    --vermelho-claro: #FF8170;
    --vermelho: #EE6352;
    --vermelho-escuro: #A13527;
    --fonte-principal: 'Work Sans';


/*
==============================
        ELEMENTOS GERAIS
==============================
*/
bodyfont-family: var(--fonte-principal);font-size: 16px;width: 100%;
    background-color: var(--vermelho);color: var(--branco);overflow-x: hidden;

h1font-family: var(--fonte-principal);font-weight: 600;

h2font-family: var(--fonte-principal);font-weight: 500;

h3font-family: var(--fonte-principal);font-weight: 400;

h4font-family: var(--fonte-principal);font-weight: 400;

h5font-family: var(--fonte-principal);font-weight: 400;

h6font-family: var(--fonte-principal);font-weight: 400;

p
    

acursor: pointer;
    

a:hover
    

header
    

footer
    

buttonbackground-color: var(--vermelho);border: none;color: var(--branco);
    font-size: 1.005em;padding: 10px 20px;margin: 20px 20px;
    cursor: pointer;

button:hoveroutline: 2px solid var(--preto);
.btn-animanimation-name: btn; animation-iteration-count: 1;animation-duration: 0.3s;
@keyframes btn
    0%transform: scale(0.9);
    100%transform: scale(1);

imgwidth: 100%;display: block;

.flexdisplay: flex;flex-direction: row;

.containerposition: relative;width: 100%;
/*
==============================
            SLIDER
==============================
*/
.slide_horizontalwidth: 100%;margin: 30px 0px;
    position: absolute;top: 0;left: 0px;font-size: 1.2em;

.slide_horizontal h4font-size: 1.5em;padding-bottom: 10px
.slide_horizontal pfont-size: 1.2em;padding-bottom: 10px
.slide_horizontal__slidermargin: 0 50px;position: relative; left: 0px;
.slide_horizontal__slider__imageposition: relative;width: 600px;height: 400px; background-color: var(--branco);
.slide_horizontal__slider__image__contentposition: absolute;top: 0;left: 0;
    background-color: rgba(48,50,61,0.60);width: 100%;height: 100%;
    display: none;

.slide_horizontal__slider__image__content spanposition: absolute; top: 40%;left: 10%;
.slide_ativodisplay: block;
.slide_frente, .slide_trascursor: pointer;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <section class="slide_horizontal flex">

    <article class="slide_horizontal__slider">
      <h3>2016</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>

    <article class="slide_horizontal__slider">
      <h3>2016</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content slide_ativo">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>

    <article class="slide_horizontal__slider">
      <h3>2016</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>

    <article class="slide_horizontal__slider">
      <h3>2016</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>

    <article class="slide_horizontal__slider">
      <h3>2016</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>

  </section>
</div>

【问题讨论】：

检查浏览器控制台是否有任何潜在的 javascript 错误。 你在下面看到我的回答了吗？ 【参考方案1】：

对于更高的索引 > 2，您只需更改 *(slide_index-1)。

这样，你可以添加更多内容，它不会停止工作。

$(document).ready(function ()
    
    //Quando se carrega no Botão animação acontece
    $('button').click(function()
        $(this).toggleClass('btn-anim');
    );

    $('.slide_horizontal__slider').click(function()
        var slide_contagem = 700;
        var slide_time = 500;
        var slide_index = $(this).index();

        if(slide_index <= 1)
            if(slide_index === 0)
                $('.slide_horizontal__slider__image__content').stop().fadeOut();
                $('.slide_horizontal__slider').stop().animate('left': slide_contagem , slide_time, function()
                    $('.slide_horizontal__slider__image__content').eq(slide_index).fadeIn(slide_time);
                );
             else 
                $('.slide_horizontal__slider__image__content').stop().fadeOut();
                $('.slide_horizontal__slider').stop().animate('left': 0 , slide_time, function()
                    $('.slide_horizontal__slider__image__content').eq(slide_index).fadeIn(slide_time);
                );
            
        else
          if(slide_index === 2)
            $('.slide_horizontal__slider__image__content').stop().fadeOut();
            $('.slide_horizontal__slider').stop().animate('left': -slide_contagem , slide_time, function()
              $('.slide_horizontal__slider__image__content').eq(slide_index).fadeIn(slide_time);
            );
           else 
            $('.slide_horizontal__slider__image__content').stop().fadeOut();
            $('.slide_horizontal__slider').stop().animate('left': -slide_contagem*(slide_index-1) , slide_time, function()
              $('.slide_horizontal__slider__image__content').eq(slide_index).fadeIn(slide_time);
            );     
          
        
    );
    
    
);
/*
TODOS OS DIREITOS RESERVADOS 2021
Mário Renato Teixeira aka FuZz3
*/

/*==================        RESET DE MARGENS        ==================*/

*, html, body, h1, h2, h3, h4, h5, h6, p, figure, img, video, svg, article, main, section, aside, div, ol, ul, il, table, input, nav, footer, header
box-sizing: border-box; margin: 0;text-decoration: none;

/*
==============================
            FONTES
==============================
*/

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800&display=swap');

/*
==============================
            CORES
==============================
*/

:root
    --branco: #FBFBFB;
    --preto: #30323D;
    --vermelho-claro: #FF8170;
    --vermelho: #EE6352;
    --vermelho-escuro: #A13527;
    --fonte-principal: 'Work Sans';


/*
==============================
        ELEMENTOS GERAIS
==============================
*/
bodyfont-family: var(--fonte-principal);font-size: 16px;width: 100%;
    background-color: var(--vermelho);color: var(--branco);overflow-x: hidden;

h1font-family: var(--fonte-principal);font-weight: 600;

h2font-family: var(--fonte-principal);font-weight: 500;

h3font-family: var(--fonte-principal);font-weight: 400;

h4font-family: var(--fonte-principal);font-weight: 400;

h5font-family: var(--fonte-principal);font-weight: 400;

h6font-family: var(--fonte-principal);font-weight: 400;

p
    

acursor: pointer;
    

a:hover
    

header
    

footer
    

buttonbackground-color: var(--vermelho);border: none;color: var(--branco);
    font-size: 1.005em;padding: 10px 20px;margin: 20px 20px;
    cursor: pointer;

button:hoveroutline: 2px solid var(--preto);
.btn-animanimation-name: btn; animation-iteration-count: 1;animation-duration: 0.3s;
@keyframes btn
    0%transform: scale(0.9);
    100%transform: scale(1);

imgwidth: 100%;display: block;

.flexdisplay: flex;flex-direction: row;

.containerposition: relative;width: 100%;
/*
==============================
            SLIDER
==============================
*/
.slide_horizontalwidth: 100%;margin: 30px 0px;
    position: absolute;top: 0;left: 0px;font-size: 1.2em;

.slide_horizontal h4font-size: 1.5em;padding-bottom: 10px
.slide_horizontal pfont-size: 1.2em;padding-bottom: 10px
.slide_horizontal__slidermargin: 0 50px;position: relative; left: 0px;
.slide_horizontal__slider__imageposition: relative;width: 600px;height: 400px; background-color: var(--branco);
.slide_horizontal__slider__image__contentposition: absolute;top: 0;left: 0;
    background-color: rgba(48,50,61,0.60);width: 100%;height: 100%;
    display: none;

.slide_horizontal__slider__image__content spanposition: absolute; top: 40%;left: 10%;
.slide_ativodisplay: block;
.slide_frente, .slide_trascursor: pointer;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <section class="slide_horizontal flex">

    <article class="slide_horizontal__slider">
      <h3>2016</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>

    <article class="slide_horizontal__slider">
      <h3>2016</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content slide_ativo">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>

    <article class="slide_horizontal__slider">
      <h3>2016</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>

    <article class="slide_horizontal__slider">
      <h3>2016</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>

    <article class="slide_horizontal__slider">
      <h3>2016</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>
    
    <article class="slide_horizontal__slider">
      <h3>XXXX</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>
    
    <article class="slide_horizontal__slider">
      <h3>XXXX</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>
    
    <article class="slide_horizontal__slider">
      <h3>XXXX</h3>
      <figure class="slide_horizontal__slider__image">
        <!--<img src="media/img/slider_1.jpg" >-->

        <div class="slide_horizontal__slider__image__content">
          <span>
            <h4>Design Multimedia</h4>
            <p>Developed for Slotfortes</p>
            <a><button>Tell me more</button></a>
          </span>
        </div>
      </figure>
    </article>

  </section>
</div>

【讨论】：

以上是关于我如何制作这个幻灯片？的主要内容，如果未能解决你的问题，请参考以下文章

我在用 sass 制作幻灯片菜单栏时遇到了一些麻烦

如何让它工作我正在尝试使用 pagecontrol 制作幻灯片，但索引显示错误

如何使用 leader-line js 在 Swiper 幻灯片之间制作动画线条？

PPT技巧操作：PPT如何制作三维立体图形

如何制作漂亮的母版

如何用Adobe Acrobat PRO制作PDF幻灯片？