Saya tidak sengaja melihat hal kecil yang saya tulis sebelumnya dan mempostingnya, mendukung klik untuk beralih dan carousel otomatis untuk dilihat oleh pemula ujung depan!
Kodenya adalah sebagai berikut:
<Div> <ul> <li> <img src = "img/pic_1.jpg"/> </li> <li> <img src = "img/pic_2.jpg"/> </li> <li> <img src = "img/pic_3.jpg"/</li> <li> <iMg = "img = ".jpg"/</li> <li> <img = "img = ".jpg"/</li> <li> <iMg = "img/pic_3.jpg"/</li> <li> <img src = "pic_3.jpg"/</li> <li> <iMg Src = "PIC_3.JPG"/</li> <li> <Img = "PICG/" /> </li> <li> <img src = "img/pic_5.jpg"/> </li></ul> <ul> <li> Proyek 1 </li> <li> Proyek 2 </li> <li> Proyek 3 </li> Proyek 4 </li> </ul> </div>
html
Di sini Anda hanya perlu mengubah jalur gambar ke yang lokal.
.scroll_div {width: 1000px; Tinggi: 370px; margin: 0 otomatis; padding: 10px;}. scroll_div .pic {width: 820px; Tinggi: 370px; meluap: tersembunyi; Posisi: kerabat; float: left;}. scroll_div .pic li {width: 820px; Tinggi: 370px; Posisi: Absolute; TOP: 0; Kiri: 0; Tampilan: None;}. SCROLL_DIV .Btn Li {width: 173px;}. scroll_div .btn li {width: 173px; Tinggi: 66px; Tampilan: Blok; float: kiri; Teks-Align: tengah; Warna: #FFFF; Font: 18px/100% "Microsoft Yahei"; font-weight: tebal; Latar Belakang:#008DD8; margin-bottom: 10px; Line-Height: 66px; kursor: pointer;}. scroll_div .btn li.on {latar belakang:#d73737;} li {List-style: none;}CSS
$ (function () {var listlen = $ (". pic li"). Panjang, i = 0, setinter, speen = 3000;/*pic carousel*/$ (". btn li: last"). css ({"margin": "0px 0px 0px 0px"}); $ (". Li: pertama "). show (); $ (". btn li "). masing -masing (fungsi (indeks, elemen) {$ (elemen) .click (function () {i = index; $ (this) .addclass (" on "). Siblings (). Removeclass (" on "); $ (". li "). eq (index) .animate ({opacity:" show "}, 300) .siblings (). animate ({opacity:" hide "}, 300);}) $ (element) .hover (function () {clearInterval (setIrinter);}, function () {outplay ();};};}; ListLen) {i ++;} else {i = 0;}; $ (". Btn li"). EQ (i) .AddClass ("on"). Siblings (). RemoveClass ("on"); $ (" li "). eq (i) .animate ({opacity:" show "}, 300) .siblings (). animate ({opacity:" hide "}, 300);} outplay = function () {setinter = setInterval (" out_fun () ", speen);} outplay ();}))