我如何制作这个幻灯片？

【问题标题】：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
==============================
*/
body{font-family: var(--fonte-principal);font-size: 16px;width: 100%;
    background-color: var(--vermelho);color: var(--branco);overflow-x: hidden;
}
h1{font-family: var(--fonte-principal);font-weight: 600;
}
h2{font-family: var(--fonte-principal);font-weight: 500;
}
h3{font-family: var(--fonte-principal);font-weight: 400;
}
h4{font-family: var(--fonte-principal);font-weight: 400;
}
h5{font-family: var(--fonte-principal);font-weight: 400;
}
h6{font-family: var(--fonte-principal);font-weight: 400;
}
p{
    
}
a{cursor: pointer;
    
}
a:hover{
    
}
header{
    
}
footer{
    
}
button{background-color: var(--vermelho);border: none;color: var(--branco);
    font-size: 1.005em;padding: 10px 20px;margin: 20px 20px;
    cursor: pointer;
}
button:hover{outline: 2px solid var(--preto);}
.btn-anim{animation-name: btn; animation-iteration-count: 1;animation-duration: 0.3s;}
@keyframes btn{
    0%{transform: scale(0.9);}
    100%{transform: scale(1);}
}
img{width: 100%;display: block;}

.flex{display: flex;flex-direction: row;}

.container{position: relative;width: 100%;}
/*
==============================
            SLIDER
==============================
*/
.slide_horizontal{width: 100%;margin: 30px 0px;
    position: absolute;top: 0;left: 0px;font-size: 1.2em;
}
.slide_horizontal h4{font-size: 1.5em;padding-bottom: 10px}
.slide_horizontal p{font-size: 1.2em;padding-bottom: 10px}
.slide_horizontal__slider{margin: 0 50px;position: relative; left: 0px;}
.slide_horizontal__slider__image{position: relative;width: 600px;height: 400px; background-color: var(--branco);}
.slide_horizontal__slider__image__content{position: absolute;top: 0;left: 0;
    background-color: rgba(48,50,61,0.60);width: 100%;height: 100%;
    display: none;
}
.slide_horizontal__slider__image__content span{position: absolute; top: 40%;left: 10%;}
.slide_ativo{display: block;}
.slide_frente, .slide_tras{cursor: 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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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 错误。
  • 你在下面看到我的回答了吗？

标签： jquery css slideshow


【解决方案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
==============================
*/
body{font-family: var(--fonte-principal);font-size: 16px;width: 100%;
    background-color: var(--vermelho);color: var(--branco);overflow-x: hidden;
}
h1{font-family: var(--fonte-principal);font-weight: 600;
}
h2{font-family: var(--fonte-principal);font-weight: 500;
}
h3{font-family: var(--fonte-principal);font-weight: 400;
}
h4{font-family: var(--fonte-principal);font-weight: 400;
}
h5{font-family: var(--fonte-principal);font-weight: 400;
}
h6{font-family: var(--fonte-principal);font-weight: 400;
}
p{
    
}
a{cursor: pointer;
    
}
a:hover{
    
}
header{
    
}
footer{
    
}
button{background-color: var(--vermelho);border: none;color: var(--branco);
    font-size: 1.005em;padding: 10px 20px;margin: 20px 20px;
    cursor: pointer;
}
button:hover{outline: 2px solid var(--preto);}
.btn-anim{animation-name: btn; animation-iteration-count: 1;animation-duration: 0.3s;}
@keyframes btn{
    0%{transform: scale(0.9);}
    100%{transform: scale(1);}
}
img{width: 100%;display: block;}

.flex{display: flex;flex-direction: row;}

.container{position: relative;width: 100%;}
/*
==============================
            SLIDER
==============================
*/
.slide_horizontal{width: 100%;margin: 30px 0px;
    position: absolute;top: 0;left: 0px;font-size: 1.2em;
}
.slide_horizontal h4{font-size: 1.5em;padding-bottom: 10px}
.slide_horizontal p{font-size: 1.2em;padding-bottom: 10px}
.slide_horizontal__slider{margin: 0 50px;position: relative; left: 0px;}
.slide_horizontal__slider__image{position: relative;width: 600px;height: 400px; background-color: var(--branco);}
.slide_horizontal__slider__image__content{position: absolute;top: 0;left: 0;
    background-color: rgba(48,50,61,0.60);width: 100%;height: 100%;
    display: none;
}
.slide_horizontal__slider__image__content span{position: absolute; top: 40%;left: 10%;}
.slide_ativo{display: block;}
.slide_frente, .slide_tras{cursor: 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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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" alt="Design multimedia for Slotfortes in 2016">-->

        <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>

【讨论】：

    猜你喜欢
    • 2021-11-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-10
    • 1970-01-01
    • 2015-09-28
    • 2023-02-04
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode