如何为幻灯片元素添加淡入淡出过渡效果

时间:2015-10-09 01:56:22

标签: jquery slideshow

如何为幻灯片元素添加淡入淡出过渡效果

我已经实现了滑块,但我无法将滑动过渡效果添加到我的滑块。这是我的代码

jQuery(document).ready(function ($) {

  $('#slide_show').ready(function(){
    setInterval(function () {
        moveRight();
    }, 4000);
  });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

}); 

http://jsfiddle.net/apps4any/uugbz6va/

带幻灯片转换的参考链接 http://www.jssor.com/demos/simple-fade-slideshow.html

0 个答案:

没有答案