Проблема с оператором IF для анимации DOM и эффектов с назначением JQuery - PullRequest
Новая
       1

Проблема с оператором IF для анимации DOM и эффектов с назначением JQuery

1 голос
/ 31 января 2020

Я создаю простое слайд-шоу, оно является частью моего 'DOM анимации и эффектов с назначением JQuery', фокусируясь на JavaScript, HTML, CSS и jQuery.

Задание простое: создайте слайд-шоу с 2 кнопками (Prev & Next). Когда я нажимаю на соответствующую кнопку, я должен перейти к следующему или предыдущему слайду. 

var $one = $(".one")
var $two = $(".two");
var $three = $(".three");
var $four = $(".four");
var $five = $(".five");
var $six = $(".six");
var $seven = $(".seven");

$two.hide();
$three.hide();
$four.hide();
$five.hide();
$six.hide();
$seven.hide();
$one.slideDown();

var $prev = $("prev");
var $next = $("next");


$next.on("click", function() {
  if ($one.slideDown()) {
    $one.hide();
    $two.slideDown();
  } else {
    $one.slideDown();
  }
});

$prev.on("submit", function() {
  if ($one.slideDown()) {
    $one.hide();
    $six.slideDown();
  } else {
    $one.slideDown();
  }
});
img {
  border: 6px rgb(245, 166, 166) solid;
}
<img src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="500" alt="Mushrooms" class="one">
<img src="https://www.kasandbox.org/programming-images/food/berries.png" width="500" alt="Berries" class="two">
<img src="https://www.kasandbox.org/programming-images/food/broccoli.png" width="500" alt="Broccoli" class="three">
<img src="https://www.kasandbox.org/programming-images/food/brussels-sprouts.png" width="400" alt="Sprouts" class="four">
<img src="https://www.kasandbox.org/programming-images/food/chocolates.png" width="500" alt="Chocolates" class="five">
<img src="https://www.kasandbox.org/programming-images/food/fruits.png" width="500" alt="Fruits" class="six">
<img src="https://www.kasandbox.org/programming-images/food/cake.png" width="500" alt="Cake" class="seven">
<button type="submit">⬅︎ Prev︎</button>
<button type="click">Next ➡</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Я потратил много времени, пытаясь найти лучший способ сделать это, а затем придумал решение выше, однако утверждение IF не работает слишком хорошо.

Я не ищу решение или прямой ответ - просто руководство, где проблема / советы о том, как ее решить (также ссылка на видео, которое может дайте мне аналогичную проблему / пошаговое руководство / учебник будет принята с благодарностью!).

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 31 января 2020

Ваш код выглядит намного лучше, как это. Есть несколько крайних случаев, но вы должны быть в состоянии справиться с ними сейчас.

Что я сделал: - присвоил слайдеру класс слайдов - я добавил активный класс к активному слайдеру - удалил активный при нажатии кнопки 

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Project: Interactive slideshow</title>
            <style>
            img {
                border: 6px rgb(245, 166, 166) solid;
            }
            </style>
        </head>
        <body>

        <br>
        <img src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="500" alt="Mushrooms" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/berries.png" width="500" alt="Berries" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/broccoli.png" width="500" alt="Broccoli" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/brussels-sprouts.png" width="400" alt="Sprouts" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/chocolates.png" width="500" alt="Chocolates" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/fruits.png" width="500" alt="Fruits" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/cake.png" width="500" alt="Cake" class="slide" >
        <button class="prev">⬅︎ Prev︎</button>
        <button class="next">Next ➡</button>

    <script>
        var slide = $(".slide")

        slide.hide();
        slide.first().show().addClass('is-active');
        // slide.first().slideDown();

        //variables
        var prev = $(".prev");
        var next = $(".next");

        //Next button action
        next.on("click", function() {
            slide.hide();
            $('.is-active').removeClass('is-active').next().addClass('is-active').show();

        });

        //Prev button action
        prev.on("click", function() {
            slide.hide();
            $('.is-active').removeClass('is-active').prev().addClass('is-active').show();

        });
    </script>

        </body>
    </html>

ПРИМЕЧАНИЕ: Пожалуйста, старайтесь избегать таких классов, как один, два, три и так далее. Потому что, если есть около 1000 изображений, вы не добавите 1000 строк кода, потому что это станет беспорядком.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...