0
Я пытаюсь сделать это слайдером для сайта, и у меня возникли проблемы с тем, чтобы этот слайдер поворачивал свои изображения. то, что я хочу получить, - это когда я нажимаю следующий на последнем изображении, он возвращается к первому изображению и то же самое с предыдущей кнопкой. код работает, если я сделаю внесенные изменения в комментарий. любая помощь была бы очень полезной! спасибо!Выполнение этого слайдера вращается бесконечно
< script type = "text/javascript" >
var Slider = function() {
this.initialize.apply(this, arguments)
}
Slider.prototype = {
initialize: function(slider) {
this.ul = slider.children[0]
this.li = this.ul.children
// make <ul> as large as all <li>’s
this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'
this.currentIndex = 0
},
goTo: function(index) {
// filter invalid indices
if (index < 0 || index > this.li.length - 1)
return
// move <ul> left
this.ul.style.left = '-' + (100 * index) + '%'
this.currentIndex = index
},
goToPrev: function() {
this.goTo(this.currentIndex - 1)
},
goToNext: function() {
/* this is the code im trying on but it wont work
if (this.currentIndex = 0) {
\t \t this.goTo(this.currentIndex + 1)
\t };
\t else if (this.currentIndex = 1) {
\t \t this.goTo(this.currentIndex + 1)
\t };
\t else if (this.currentIndex = 2) {
\t \t this.goTo(this.currentIndex + 1)
\t };
\t else*/
this.goTo(this.currentIndex - 3)
}
}
var sliders = []
$('.slider').each(function() {
sliders.push(new Slider(this))
}).slider {
width: 400px;
height: 300px;
overflow: hidden;
}
.slider > ul {
position: relative;
left: 0;
-webkit-transition: 0.5s left;
-moz-transition: 0.5s left;
-ms-transition: 0.5s left;
-o-transition: 0.5s left;
list-style: none;
margin: 0;
padding: 0;
}
.slider > ul > li {
float: left;
width: 400px;
height: 300px;
}<div class="slide">
<div class="slider">
<ul>
<li>
<img src="img1.jpg">
</li>
<li>
<img src="img2.jpg">
</li>
<li>
<img src="img3.jpg">
</li>
</ul>
</div>
<div class="navigation">
<a href="javascript:sliders[0].goToPrev()">Prev</a>
<a class="butnav" href="javascript:sliders[0].goTo(0)">1</a>
<a class="butnav" href="javascript:sliders[0].goTo(1)">2</a>
<a class="butnav" href="javascript:sliders[0].goTo(2)">3</a>
<a href="javascript:sliders[0].goToNext()">Next</a>
</div>
</div>
Если вы хотите, чтобы после последнего изображения он не должен идти обратный обратно к первому изображению затем изменить CSS соответственно. –
приятный! Именно то, что я искал! благодаря! – j4sonsi4