Rumah >hujung hadapan web >tutorial js >jquery slaid plug-in bxslider penambahbaikan gaya example_jquery

jquery slaid plug-in bxslider penambahbaikan gaya example_jquery

WBOY
WBOYasal
2016-05-16 16:33:561342semak imbas

Contoh dalam artikel ini menerangkan cara untuk menambah baik gaya bxslider pemalam tayangan slaid jquery dan mengongsinya dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Saya membandingkan banyak slaid jquery dan mendapati ia tidak begitu bagus Akhirnya, saya mendapati bahawa bxslider mempunyai keserasian terbaik dan menyokong flipping manual pada peranti mudah alih.

Tetapi kesan paparan rasmi benar-benar hodoh dan tidak boleh diterima. Akhirnya saya terpaksa DIY sendiri.

Gaya rasmi bxslider adalah seperti berikut:

Gaya yang diubah suai adalah seperti berikut:

Langkah 1: Perkenalkan bxslider

Salin kod Kod adalah seperti berikut:








Langkah 2: Tambahkan kod html bxslider

Salin kod

Kod adalah seperti berikut:
>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
  •                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            



    Kod html rasmi asal adalah seperti ini:





    Salin kod


    Kod adalah seperti berikut:








    Atas dasar ini, DIV lapisan induk bagi slider_block dicipta dan kedudukan ditetapkan kepada relatif, terutamanya untuk membelok halaman "1, 2, 3" untuk kedudukan mutlak pengelui gelangsar sublapisan.

    Langkah 3: Ubah suai CSS jquery.bxslider.css dan tambahkan pengoptimuman gaya CSS untuk slider-pager

    Salin kod

    Kod adalah seperti berikut: #slider_block{kedudukan: relative;margin: 0 auto;height: 245px;margin-top:10px;overflow:hidden;} #slider-pager{kedudukan: mutlak;bawah: 10px;kanan: 10px;z-index: 999;saiz fon: 0px;} #slider-pager .pager-link {float: left;width: 15px;height: 15px;line-height: 15px;text-align: center;margin: 0 0 0 10px;latar belakang: #FC0;color: #930; } #slider-pager .aktif {latar belakang: #0C3;warna: #fff;}
    /*Alih keluar kesan bayang, penyemak imbas tidak serasi dengan 4jcms */
    /*.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; bayang-kotak: 0 0 5px #ccc; Sempadan: pepejal #fff 5px; Kiri: -5px;
    latar belakang: #fff;
    }

    */
    #slider_block{kedudukan: relative;margin: 0 auto;height: 245px;margin-top:10px;overflow:hidden;}
    #slider-pager{kedudukan: mutlak;bawah: 10px;kanan: 10px;z-index: 999;saiz fon: 0px;}
    #slider-pager .pager-link {float: left;width: 15px;height: 15px;line-height: 15px;text-align: center;margin: 0 0 0 10px;latar belakang: #FC0;color: #930; }
    #slider-pager .aktif {latar belakang: #0C3;warna: #fff;}

    /*Alih keluar kesan bayang, penyemak imbas tidak serasi dengan 4jcms */
    /*.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    bayang kotak: 0 0 5px #ccc;
    sempadan: pepejal #fff 5px;
    kiri: -5px;
    latar belakang: #fff;
    } */



    Pengubahsuaian terakhir selesai

    Kenyataan:
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn