Code trình diễn ảnh tuyệt đẹp cho vào blog

Hôm nay mình post tặng các bạn code trình diễn ảnh rất đẹp

Demo
http://caobang83.webng.com/slides2/

Code
1.Code sau các bạn cho vào thẻ head nhé

<script type="text/javascript" src="http://caobang83.webng.com/slides2/jquery.js"></script>
    <script type="text/javascript" src="http://caobang83.webng.com/slides2/jquery.nivo.slider.pack.js"></script>
    <link rel="stylesheet" href="http://caobang83.webng.com/slides2/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://caobang83.webng.com/slides2/themes/default.css" type="text/css" media="screen" />

    <style>
    .theme-default #slider, .theme-default #slider img
    {
        top:100px;
        left: 20%;
        width:700px; /* Chiều rộng */
        height:300px; /* Chiều cao */
    }
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-weight:inherit;
        font-style:inherit;
        font-size:100%;
        font-family:inherit;
        vertical-align:baseline;
    }
    body {
        line-height:1;
        color:black;
        background:white;
    }
    table {
        border-collapse:separate;
        border-spacing:0;
    }
    caption, th, td {
        text-align:left;
        font-weight:normal;
    }
    body {
    font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
    color:#333;
    background:#eee;
    }
  
    a, a:visited {
        color:blue;
        text-decoration:none;
    }
    a:hover, a:active {
        color:#000;
        text-decoration:none;
    }

    </style>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
        animSpeed: 1000,// Tốc độ trượt ảnh, quy định 1000 = 1giây
        pauseTime: 3000, // Tốc độ chuyển ảnh A sang ảnh B
        startSlide: 2 // Để ảnh số mấy hiển thị đầu tiên, Ảnh số 1 để startSlide: 0
        });
    });
    </script>

2. Code sau các bạn cho vào thẻ body nhé chôc nào muốn hiển thị

<div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <a href="http://webtruonghoc.oni.cc"><img src="http://doxinh.com/templates/default/img/jqbanner/doxinh_1.jpg" alt="" title="Điền nội dung vào đây 1" /></a>
                <a href="http://webtruonghoc.oni.cc"><img src="http://doxinh.com/templates/default/img/jqbanner/doxinh_2.jpg" alt="" title="Điền nội dung vào đây 2" /></a>
                <a href="http://webtruonghoc.oni.cc><img src="http://doxinh.com/templates/default/img/jqbanner/doxinh_3.jpg" alt="" title="Điền nội dung vào đây 3" /></a>

                <a href="http://webtruonghoc.oni.cc"><img src="http://doxinh.com/templates/default/img/jqbanner/doxinh_4.jpg" alt="" title="Điền nội dung vào đây 4" /></a>
                <a href="http://webtruonghoc.oni.cc"><img src="http://doxinh.com/templates/default/img/jqbanner/doxinh_5.jpg" alt="" title="Điền nội dung vào đây 5" /></a>
            </div>
        </div>

3.Hướng dẫn
-Các bạn chỉnh sửa phần in đậm ở code 1 còn lại để nguyên
-Các bạn thay đổi link liên kết ,link ảnh , nội dung ở code 2

Posted in: Thủ Thuật