Tạo Slide Ảnh Chạy Theo Thứ Tự

4 comments

Có lẽ ai cũng muốn một tiện ích Slide Image làm cho Blog thêm vip hơn ha ^^

Hôm nay Pu sẽ tăng thêm độ Code (cơ mà vẫn rất dễ làm) để làm slide trượt bằng CSS3

Về việc Slide ảnh thì anh An có đề cập bài trước. Nhưng theo hướng dẫn trước thì slide có 1 nhược điểm là chạy không theo ý muốn mình nên hôm nay Pu share cái này thêm cho các bạn.

XEM DEMO

1. Chèn đoạn css bên dưới vào trước thẻ ]]></b:skin> 

#slider {
    width: 845px;
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #434343;
}
#slider [id^='image']:target img {
    top: 0;
}
#slider [id^="image"] img {
    position: absolute;
    top: -200px;
    border: 0;
    -moz-transition: top 0.5s ease-in;
    -ms-transition: top 0.5s ease-in;
    -webkit-transition: top 0.5s ease-in;
    -o-transition: top 0.5s ease-in;
}
#slider [id^='image']:target a {
    background: #fff;
    border: 3px solid #333;
    width: 10px;
    height: 10px;
}
.slider-nav {
    background: #333;
    width: 16px;
    z-index: 9999;
    height: 16px;
    box-shadow: inset 0px 2px 10px rgba(0,0,0,0.3), 0px 0px 20px rgba(255,255,255,0.4);
    border-radius: 32px;
    position: absolute;
    bottom: 15px;
}
#image-1 .slider-nav { right: 80px; }
#image-2 .slider-nav { right: 60px; }
#image-3 .slider-nav { right: 40px; }
#image-4 .slider-nav { right: 20px; }

2. Tạo 1 HTML ở ngay đầu blog hoặc tạo 1 post riêng để kiểm chứng kết quả cũng được ^^
Paste đoạn code này vào

<div id="slider">
    <div id="image-1">
        <a href=""><img src="http://4.bp.blogspot.com/-uQHWHdvMNlg/T3fcqe2H0uI/AAAAAAAAA84/QLDPpAJ1SGA/s1600/4.jpg" alt="" /></a>
        <a class="slider-nav" href="#image-1"></a>
    </div>
    <div id="image-2">
        <a href=""><img src="http://3.bp.blogspot.com/-JQp1VDovfDM/T3fcpFqLj3I/AAAAAAAAA8o/mofV_nV7rOs/s1600/1.jpg" alt="" /></a>
        <a class="slider-nav" href="#image-2"></a>
    </div>
    <div id="image-3">
        <a href=""><img src="http://4.bp.blogspot.com/-WJ4115gaNss/T3fcp0uV1QI/AAAAAAAAA8w/6PLWPWzrhKE/s1600/2.jpg" alt="" /></a>
        <a class="slider-nav" href="#image-3"></a>
    </div>
    <div id="image-4">
        <a href=""><img src="http://2.bp.blogspot.com/-a0THdZPHLuY/T3fcp_4il1I/AAAAAAAAA8s/GGxa3Lvk7_8/s1600/3.jpg" alt="" /></a>
        <a class="slider-nav" href="#image-4"></a>
    </div>
</div>

Trong các phần màu đỏ đánh dấu ở trên là phần bạn thay ảnh khác bằng Style của bạn ^^~

Bây giờ đã đọc và liếc sơ qua code thì hãy chú ý những điểm sau:

Chú ý - Important

• Kích thước ảnh bắt buộc là 845x200 px
• Mặc định là 4 ảnh, còn muốn thêm vào thì từ từ để mình nghiên cứu sau =.="
• Chiều ngang mặc định của tiện ích cũng là 845px
• Slide này có nhược điểm là không tự động load và chỉ load khi nào click vào 1 trong 4 điểm xám ở cuối blog ^^ (đơn giản mà lị)