我正在创建一个包含三个图像的HTML5图像轮播。过渡是通过TweenMax和TimeLine完成的。我有两个单击事件,一个用于下一个图像,一个用于上一个图像,下一个图像功能正常运行,并且是一个无限循环,但是上一个功能在经过图像一次后停止。这是代码。
HTML:
<div id="expanded-state">
<div id="expanded-exit"></div>
<div id="close-btn"></div>
<button id="arrow-prev"></button>
<button id="arrow-next"></button>
<div id="theater">
<div class="theater"></div>
<div class="theater"></div>
<div class="theater"></div>
</div>
<div id="cta"></div>
<div id="footer"></div>
</div>
</div>
CSS:
.theater {
width: 970px;
height: 345px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.theater:nth-child(1){
background: url(theater-01.jpg);
}
.theater:nth-child(2){
background: url(theater-02.jpg);
}
.theater:nth-child(3){
background: url(theater-03.jpg);
}
JS:
var $slides = $(".theater");
var currentSlide = 0;
function addListeners() {
arrowPrev.addEventListener('click', theaterScrollPrev);
arrowNext.addEventListener('click', theaterScrollNext);
}
function theaterScrollNext() {
tm.to( $slides.eq(currentSlide), 0.5, {left:"-970px"} );
if (currentSlide < $slides.length - 1) {
currentSlide++;
}
else {
currentSlide = 0;
}
tm.fromTo( $slides.eq(currentSlide), 0.5, {left: "970px"}, {left:"0px"} );
}
function theaterScrollPrev() {
tm.to( $slides.eq(currentSlide), 0.5, {left:"970px"} );
if (currentSlide < $slides.length - 1) {
currentSlide--;
}
else {
currentSlide = 0;
}
tm.fromTo( $slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"});
}
我相信这应该解决它,但是告诉我是否可以解决
function theaterScrollPrev() {
console.log('previous clicked')
tm.to( $slides.eq(currentSlide), 0.5, {left:"970px"} );
if (currentSlide <= 0) {
currentSlide = $slides.length -1;
} else {
currentSlide--;
}
tm.fromTo( $slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"} );
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句