J'ai accidentellement vu cette petite chose que j'ai écrite auparavant et je l'ai publiée, en soutenant un clic pour changer et un carrousel automatique pour les novices frontaux à voir!
Le code est le suivant:
<v> <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 src = "IMG / pic_4. /> </li> <li> <img src = "img / pic_5.jpg" /> </li></ul> <ul> <li> Projet 1 </li> <li> Projet 2 </li> <li> Projet 3 </li> <li> Projet 4 </li> </ul> </div>
html
Ici, vous avez juste besoin de changer le chemin d'image vers votre local.
.scroll_div {width: 1000px; hauteur: 370px; marge: 0 auto; rembourrage: 10px;}. SCROLL_DIV .PIC {Width: 820px; hauteur: 370px; débordement: caché; Position: relative; float: Left;}. Scroll_Div .Pic li {width: 820px; hauteur: 370px; Position: absolue; en haut: 0; à gauche: 0; Affichage: aucun;}. Scroll_Div .BTn li {width: 173px;}. Scroll_Div .BTn li {width: 173px; hauteur: 66px; Affichage: bloc; flottant: à gauche; Texte-aligne: Centre; Couleur: #ffff; Police: 18px / 100% "Microsoft Yahei"; Police-poids: Bold; Contexte: # 008DD8; marge-fond: 10px; hauteur de ligne: 66px; curseur: pointeur;}. Scroll_Div .btn li.on {background: # d73737;} li {list-style: Aucun;}CSS
$ (function () {var listlen = $ (". pic li"). longueur, i = 0, setinter, speen = 3000; / * pic carrousel * / $ (". btn li: dernier"). css ({"margin": "0px 0px 0px 0px"}); $ (". Btn li: premier"). li: d'abord "). show (); $ (". btn li "). Chaque (fonction (index, élément) {$ (élément) .click (function () {i = index; $ (this) .addclass (" on "). li "). eq (index) .animate ({opacity:" show "}, 300) .siblings (). animate ({opacity:" hide "}, 300);}) $ (élément) .hover (function () {ClearInterval (setInter) listlen) {i ++;} else {i = 0;}; $ (". btn li"). eq (i) .addclass ("on"). li "). eq (i) .animate ({opacity:" show "}, 300) .siblings (). animate ({opacity:" hide "}, 300);} outplay = function () {setInter = setInterval (" out_fun () ", speen);} outer ();})