Di sini saya akan memposting kode yang saya tunjukkan di sini, berharap untuk menginspirasi semua inspirasi untuk teman -teman saya. Saya telah menggabungkan dua contoh untuk mengimplementasikannya di sini
.focus-item ul li.item {text-align: center;}. gulir-area .prev, .scroll-are .next {position: absolute; Bawah: 590px; Lebar: 29px; Tinggi: 64px; Opacity: 0.6; meluap: tersembunyi; Tampilan: Tidak Ada; Text -Indent: -999px; Perbatasan: Sedang tidak ada; Latar belakang: url ('/gambar/arrowlr.png') no-repeat gulir 0% 0% transparan;}. scroll-are .prev {kiri: 0px; background-position: -50px 0px;}.scroll-area .next{ right: 0px;}.scroll-area .bdOn .prev,.scroll-area .bdOn .next{ display: block;} .scroll-area .focus-hd{ /*width: 832px;*/ /*left: 60px;*/ /*position: absolute;*/ /*Tinggi: 100px;* / /*overflow: tersembunyi;* / kiri: 63px; Posisi: absolute;} .focus-hd .snext, .focus-hd .sprev {float: left; Tampilan: Blok; Lebar: 14px; Tinggi: 47px; Text -Indent: -9999px; Latar Belakang: url ('/gambar/sprites1008.png') gulir no-repeat 0px -3046px transparent;}. Focus-hd .snext {latar belakang-posisi: 0px -2698px;} .focus-hd .show_bottom_nav {float: kiri; margin: 0px 6px; Tampilan: inline; Lebar: 832px; overflow: tersembunyi;}. focus-hd .show_bottom_nav ul li {margin-left: 15px;}Kode demo HTML:
<Div ID = ""> <div> <ul> <li data-bottom-thumb = "/lampiran/news_gallery/20140528162328_454.jpg" data-text-id = "#thumbtxt1"> <mmg src = "/lampiran/news_gallery/2014058282824."/news_gallery/20140582816. data-bottom-thumb = "/lampiran/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxt2"> <img src = "/lampiran/news_gallery/20140528162328_733.jpg"/> </Ul/uT/uT/UL </ULR> </ULR> </ULRAN./ULROT/ULT/201428128_733.733. href = "javascript: void (0)"> </a> <a href = "javascript: void (0)"> </a> </div> <div style = ""> <a href = "javascript: void (0)"> data-bottom-thumb = "/lampiran/news_gallery/20140528162328_454.jpg" data-text-id = "#thumbtxt1" style = "float: left"> <img src = "/lampiran/news_gallery/2014052816162328_454.454.jgments/news_gallery/201405281628_454. data-bottom-thumb = "/lampiran/news_gallery/20140528162328_733.jpg" data-text-id = "#thumbtxt2" style = "float: left"> <img src = "/lampiran/news_gallery/2014052828162328_733.j"/news_gallery/20140528161628_733.j " href = "JavaScript: void (0)"> → </a> </div> </div>
Kode skrip JS:
jQuery (". Gulir-area"). Slide ({titcell: '. Focus-hd li', Maincell: '. Focus-item ul', Delaytime: 0, Trigger: 0, Autoplay: True}); jQuery (". Gulir-area .focus-item "). hover (function () {jQuery (this) .addclass (" bdon ")}, function () {jQuery (this) .removeclass ('bdon')}); // navigasi tag kecil jQuery (". scroll-area. Maincell: "UL", Delaytime: 100, Vis: 5, Efek: "Kiri", Autopage: Benar, Prevcell: ". Sprev", NextCell: ". Snext"});