JQuery плагин картинки исчезают / выходят - PullRequest
Новая
       31

JQuery плагин картинки исчезают / выходят

0 голосов
/ 01 марта 2012

Кто-нибудь знает о небольшом плагине jquery, который действует как слайдер, но затухает в изображениях?

Я нашел это http://nivo.dev7studios.com/, но это кажется довольно тяжелым. Кто-нибудь знает простой плагин?

Спасибо

Ответы [ 2 ]

0 голосов
/ 01 марта 2012

Я разработал плагин под названием Basic jQuery Slider - Он очень прост в использовании и настройке и имеет очень маленький размер файла. Кроме того, он поддерживает любой контент, а не только изображения. Если вы решили попробовать и у вас есть какие-либо вопросы, просто спросите!

0 голосов
/ 01 марта 2012

Вот легкий способ сделать то, что я использовал.

HTML: 

<div id="feature">
    <div id="overlay"></div>
    <div class="slide" style="background: url(image.jpg) no-repeat;">
    <h2>Driven by strategy</h2>
    </div>
    <div class="slide" style="background: url(image.jpg) no-repeat;">
    <h2>Committed to our relationships</h2>
    </div>
    <div class="slide" style="background: url(image.jpg) no-repeat;">
    <h2>Changing it up </h2>
    </div>
</div>

CSS: 

/* Feature */
#feature {
    width: 990px;
    height: 500px;
    overflow: hidden;
    position: relative;
}

#feature .slide {
    width: 990px;
    height: 500px;
}

#feature #overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 99 !important;
    width: 950px;
    height: 45px;
    line-height: 45px;
    padding: 20px;
    text-align: right;
    background: transparent url(img/bg_feature_story.png) top left no-repeat;
    color: #ffffff;
}

JavaScript: 

$(function(){
    $(".slide").hide();
    $(".slide:first").show();
    $("#feature").css("background-image", "null");
  setInterval(function(){
    changeImage();
  },5800);

    $("#overlay").html( "" );
    $(".slide").each( function(){
        $("#overlay").append('<div class="slidetext" style="display:none;">' + $(this).html() + "</div>");  
        $(this).html("");
    });
    $(".slidetext:first").show();


  function changeImage(){
    var $currImg = $(".slide:visible");
    var $currText = $(".slidetext:visible");
    if ($currImg.next().length == 1) {
      var $next = $currImg.next();
      var $nexttext = $currText.next();
    } else {
      var $next = $(".slide:first");
      var $nexttext = $(".slidetext:first");
    }
    var bi = $currImg.css("background-image");
    $("#feature").css("background-image",  bi );
    $currImg.fadeOut( 100, function(){
    });
    $next.fadeIn( 1000, function(){
        $currText.hide();
        $nexttext.show();
    });
  }  
});
...