jquery slaid plug-in bxslider penambahbaikan gaya example_jquery

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:

>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

• 

{$i}

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