Tạo slide hình nền toàn màn hình (full background) với jQuery

Backgrounds hay hình nền là một khía cạnh rất quan trọng khi chúng ta tạo một trang web. Thật dễ dàng cho chúng ta khi tạo một hình ảnh làm nền cho web, tuy nhiên nếu các bạn muốn chèn nhiều hình nền cho website hay blog của các bạn thì sao ? Để trả lời câu hỏi này, thì các bạn cứ xem từng bước làm cụ thể trong bài viết này thì sẽ rõ ^^.

Xem Demo | Download

Bước 1 : HTML

Đầu tiên, chúng ta sẽ cần những tấm hình để làm ảnh nền như sau :

<div id="slideshow">
    <img class="active" src="image1.jpg" alt="Slideshow Image 1" />
    <img src="image2.jpg" alt="Slideshow Image 2" />
    <img src="image3.jpg" alt="Slideshow Image 3" />
    <img src="image4.jpg" alt="Slideshow Image 4" />
    <img src="image5.jpg" alt="Slideshow Image 5" />
</div>

Bước 2 : Javascript
Để các hình nền có thể chuyển đổi, chúng ta sẽ sử dụng jQuery. Copy đoạn script sau, rồi dán nó vào ngay trên thẻ

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

// xóa ghi chú ở 3 dòng bên dưới nếu bạn muốn hiển thị ảnh ngẫu nhiên

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>

Đoạn code bên trên chỉ đơn giản là tìm xem hình nào đang chứa class “active” rồi sau đó tìm những hình ảnh kế cận nó để thay thế làm hình nền.

Bước 3 : CSS

Để hiệu ứng có thể mượt mà và chạy tốt, các bạn cần copy đoạn css bên dưới và áp dụng vào cho chính website hay blog của mình.

#slideshow {
    position:relative;
    height:350px;
    z-index:-1;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

#slideshow img {
    /* Set rules to fill background */
    min-height: 100%;
    min-awidth: 1024px;

    /* Set up proportionate scaling */
    awidth: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-awidth: 1024px){
    img.bg {
    left: 50%;
    margin-left: -512px;
}
}

Bây giờ , nếu các bạn muốn đặt nội dung vào trang web nằm trên hình nền mà chúng ta vừa tạo , thì copy thêm đoạn css ở bên dưới cho thẻ chứa nội dung .

#content {
    awidth: 920px;
    margin: 0 auto;
    background: rgba(11,11,11, 0.5);
    padding: 20px;
}

Thế là xong rồi đó các bạn, nếu các bạn thấy bài viết có chỗ nào khó hiểu thì có thể xem demo hoặc file download mà mình đính kèm trong bài viết này. Hoặc có thể để lại lời nhắn dưới dạng comments, mình sẽ giúp các bạn hoàn thành bài viết này.

Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster