slider.js для поворота изображения, вызванного из html, поворачивает все изображения одновременно против поворота через - PullRequest
0 голосов
/ 25 апреля 2018

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

<div id = "slideshow">
    <div id = "slideshowWindow">
        <div class = "slide"> <img src = "hotelroom1.jpg">
            <div class = "slideText">
                <h1 class = "slideHeading">Average Room</h1>
            </div>
        </div>
        <div class = "slide" id = "slide2"> <img src = "hotelroom2.jpg">
            <div class = "slideText">
                <h1 class = "slideHeading">Luxury Room</h1>
            </div>
        </div>
        <div class = "slide"> <img src = "hotelpool.jpg">
            <div class slideText>
                <h1 class = "slideHeading">Hote Pool Area</h1>
            </div>
        </div>
    </div>
</div>

Внизу две ссылки на сценарии:

<script src = "https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src = "slider.js"></script>

Который ссылается на следующий файл slider.js:

$(document).ready(function(){
    //variables
    var currentPosition = 0;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var speed = 3000;
    var slideShowInterval = setInterval(changePosition, speed);
    slides.wrapAll('<div id="dynamicWindow"></div>')
    $('#dynamicWindow').css('width', '300%');
    function changePosition()   {
        if (currentPosition == numberOfSlides - 1)
        {currentPosition = 0;}
    else { currentPosition++;}
    moveSlide();
    }
    function moveSlide(){
        jQuery('#dynamicWindow').animate({'marginLeft':(-currentPosition)*100+'%'});
    }
});

Который использует следующий CSS для форматирования:

#slideshow #slideshowWindow {
    position:relative;
    overflow:hidden;
}
#slideshow #slideshowWindow .slide {
    width:33.333333%;
    float:left;
}
.slideText{
    position:absolute;
    top:100px;
    padding-left:100px;
}

Я не разработчик, просто студент ... пожалуйста, говорите медленно и прямо! Спасибо, Том

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