[英]Creating a javascript slider; slide motion doesn't work on 1st slide, but sliding motion works after second slide?
我正在為我的網站構建Javascript滑塊,但似乎遇到了一個奇怪的問題。 我希望單擊“下一張幻燈片”鏈接時發生滑動。 當我第一次單擊“下一張幻燈片”時,圖像只是從第一張跳到第二張。 但是,當我第二次單擊“下一張幻燈片”時,圖像將按我希望的方式滑動到第三張。 有誰知道為什么滑動似乎跳過了初始點擊? 請參見下面的代碼。
html的
<script>
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.goTo(this.currentIndex + 1)
}
}
</script>
<div class="slider">
<ul>
<li><img src="commercial1.png"></li>
<li><img src="commercial2.png"></li>
<li><img src="commercial3.png"></li>
</ul>
</div>
<script>
var sliders = []
$('.slider').each(function() {
sliders.push(new Slider(this))
})
</script>
<div class="controls">
<ul>
<li><a href="javascript:sliders[0].goToPrev()">.goToPrev()</a></li>
<li><a href="javascript:sliders[0].goToNext()">.goToNext()</a></li>
</ul>
</div>
.CSS
.slider {
width: 1000px; height: 500px;
overflow: hidden;
}
.slider > ul {
position: relative;
-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: 1000px; height: 500px;
}
.controls {
padding-top:10px;
}
它不起作用的原因是因為您已為其提供了從其過渡的初始狀態。
只需將CSS調整為此
.slider > ul {
position: relative;
transition: left .5s ease-in-out;
left:0;
}
*注意left:0;
那應該做
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.