Может кто-нибудь помочь мне автоматически воспроизвести мой слайдер?

0

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

Мой Javascript:

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {

    $(".slide > img#1").fadeIn(300);
    startSlider();
});

function startSlider(){

    count = $(".slide > img").size();

    loop = setInterval(function() {

        if (sliderNext > count) {
            sliderNext = 1;
            sliderInt = 1;
        }

        $(".slide > img").fadeOut(300);
        $(".slide > img#" + sliderNext).fadeIn(300);

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;

    }, 3000)

}

Мой CSS:

.slide
{
top: 0;
opacity: 0;
width: 745px;
height: 420px;
display: block;
position: absolute;

transform: scale(0);

transition: all .7s 
}

.slide img 
{
width: 100%;
height: 100%;
border-radius: 6px;
border: 1px solid #95ca1a;
}

.nav label
{
width: 200px;
height: 100%;
display: none;
position: absolute;

opacity: 0;
z-index: 9;
cursor: pointer;

transition: opacity .2s;

color: #FFF;
font-size: 156pt;
text-align: center;
line-height: 380px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label 
{
opacity: 0.5; 
}

.nav label:hover 
{
 opacity: 1; 
}

.nav .next {
 right: 0;
}

input:checked + .slide-container  .slide 
{
opacity: 1;

transform: scale(1);

transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label 
{
display: block;
border-radius: 6px; 
}
  • 1
    Где твой HTML? Вставьте это.
  • 0
    Просто глядя на jQuery и код, который вы написали, вы никогда не захотите иметь идентификатор элемента, начинающийся с числа, не говоря уже о том, чтобы иметь номер в качестве идентификатора.
Показать ещё 1 комментарий
Теги:

1 ответ

0
Лучший ответ

Я изменил несколько вещей, а не совершенный код, который я написал, но он выполняет свою работу.

Из вашего кода и css я могу только предположить, что вы пытаетесь создать слайд-шоу, подобное этому

  • Я переименовал, как вы должны создать идентификатор элемента следующим образом: <img id="slide_1"...

  • Я удалил непрозрачность с CSS-стиля

  • Код jQuery выглядит так:

    (function (){
    var count = $(".slide > img").length;
    var current = 1;
    var sliderNext = 2;

    $("img[id^='slide_']").fadeOut(0);
    $("#slide_" + current).fadeIn(300);
    var loop = setInterval(function() {
        $("#slide_" + current).fadeOut(300);
        $("#slide_" + sliderNext).fadeIn(300);
        (sliderNext >= count) ? sliderNext = 1 : sliderNext++;
        (current >= count) ? current = 1 : current++;
    }, 3000)
})()
Поделиться
  • 0
    Вы проверяли свою ссылку?
  • 0
    Только на chrome не успел перепроверить другие браузеры
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню