后退按钮 js 幻灯片

Back button js slideshow

本文关键字：幻灯片 js 按钮      更新时间：2023-09-26

我不熟悉js，我正在尝试制作一个滑块女巫包含带有动画的htmldivs。这是我使用的 js： 

$(function(){
// find all slides
var slides = $('.main-slide');
// starting index
var i = 0;
// click listener
$('#main-slider-next').click(function(){
// find next index
// i + 1 or 0 if end of slides
i = ++i % slides.length;
// scroll to that index
$('.slider-wrapper').animate(
  {'left' : -(slides.eq(i).position().left)},
  1000
);
});
});

该代码包含一个下一张幻灯片按钮，但我想知道如何使用 js 制作上一张幻灯片按钮。有谁知道我怎么能做到这一点？

很容易。 尝试：

$('#main-slider-previous').click(function() {
    $('.slider-wrapper').animate({
        'left': '+=100%'
    },1000);
});

您可以随时使用一些简单的jQuery滑块，例如 http://www.basic-slider.com/（或更高级的 http://unslider.com/）您所要做的就是更改动画类型设置：

animtype : 'fade',

自

animtype : 'slide',

你已经准备好;)了。

相关文章：