Hỗ trợ trực tuyến

  • (Bùi Trọng Bằng)

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • Thành viên trực tuyến

    2 khách và 0 thành viên

    DANH NGÔN MỖI NGÀY

    Gốc > Code cho Blog và Web >

    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

    -Với blog violet các bạn cho cả 2 code trên vào thêm khối chức năng chính nhé


    Nhắn tin cho tác giả
    Cao Bằng @ 08:20 24/08/2011
    Số lượt xem: 4959
    Số lượt thích: 0 người
    Avatar

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

    No_avatarf

    Chào thấy, thầy cho tôi hỏi thầy có code nào mà hình trong thư mục ramdom mà ko cần ghi file hình không, thank

    mong thầy giúp.

    http://violet.vn/th-nguyendu-cumgar-daklak/

     
    Gửi ý kiến