Я выполняю задание, в котором мы должны вращать сайт по изображениям. Вот код с домашней страницы:
<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;
}
Я не разработчик, просто студент ... пожалуйста, говорите медленно и прямо!
Спасибо,
Том