Ich habe dieses kleine Ding, das ich zuvor geschrieben habe, versehentlich gesehen und gepostet und unterstützte es, um zu schalten und zu automatisch zu schalten, damit Front-End-Anfänger sehen können!
Der Code ist wie folgt:
<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> <img /> </li> <li> <img src = "img/pic_5.jpg"/> </li> </ul> <ul> <li> Projekt 1 </li> <li> Projekt 2 </li> <li> Projekt 3 </li> <li> Projekt 4 </li> </ul> </div> </div> </div>
html
Hier müssen Sie nur den Bildpfad zu Ihrem lokalen ändern.
.Scroll_div {width: 1000px; Höhe: 370px; Rand: 0 Auto; Polsterung: 10px;}. scroll_div .pic {width: 820px; Höhe: 370px; Überlauf: versteckt; Position: Relativ; float: links;}. scroll_div .pic li {width: 820px; Höhe: 370px; Position: absolut; Top: 0; links: 0; Anzeige: Keine;}. scroll_div .BTN li {width: 173px;}. scroll_div .BTN li {width: 173px; Höhe: 66px; Anzeige: Block; float: links; Text-Align: Mitte; Farbe: #ffff; Schriftart: 18px/100% "Microsoft Yahei"; Schriftgewicht: fett; Hintergrund:#008dd8; Randboden: 10px; Zeilenhöhe: 66px; Cursor: Zeiger;}. scroll_div .btn li.on {Hintergrund:#d73737;} li {Listenstil: Keine;}CSS
$ (function () {var listlen = $ (". pic li"). Länge, i = 0, setInter, speen = 3000;/*pic carousel*/$ (". Btn li: last"). CSS ("Margin": "0px 0px 0px 0px"}); li: First "). show (); li "). EQ (Index) .Animate ({Opazität:" show "}, 300) .sillings (). Animate ({opazität:" hide "}, 300);}) $ (element) .hover (function () {clearInterval (setInter);}, function () {Outlay ();});}); Listlen) {i ++;} else {i = 0;}; $ (". Btn li"). EQ (i) .AddClass ("on"). Geschwister (). removeclass ("on"); $ (" li "). EQ (i) .Amimate ({Opazität:" Show "}, 300) .sillings (). Animate ({opazität:" hide "}, 300);} outlay = function () {setInter = setInterval (" out_fun () ", speen);} outlay ();});});}))