¡Accidentalmente vi esta pequeña cosa que escribí antes y la publiqué, admitiendo hacer clic para cambiar y un carrusel automático para que los novatos delantera lo vea!
El código es el siguiente:
<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> <i> <img src = "img/pic_4.jpg" /> </li> <li> <img src = "img/pic_5.jpg"/> </li> </ul> <ul> <li> Proyecto 1 </li> <li> Proyecto 2 </li> <li> Proyecto 3 </li> <li> Proyecto 4 </li> </ul> </div>
html
Aquí solo necesita cambiar la ruta de imagen a su local.
.scroll_div {ancho: 1000px; Altura: 370px; margen: 0 auto; Pading: 10px;}. scroll_div .pic {ancho: 820px; Altura: 370px; desbordamiento: oculto; Posición: relativo; float: izquierda;}. scroll_div .pic li {ancho: 820px; Altura: 370px; Posición: Absoluto; arriba: 0; Izquierda: 0; visualización: ninguno;}. scroll_div .btn li {ancho: 173px;}. scroll_div .btn li {ancho: 173px; Altura: 66px; Pantalla: bloque; flotante: izquierda; Text-Align: Center; Color: #ffff; fuente: 18px/100% "Microsoft Yahei"; Font-Weight: Bold; Antecedentes:#008DD8; margen-fondo: 10px; Línea de altura: 66px; cursor: pointer;}. scroll_div .btn li.on {fondo:#d73737;} li {list-style: none;}CSS
$ (function () {var listLen = $ (". Pic li"). Longitud, i = 0, setinter, speen = 3000;/*pic Carousel*/$ (". Btn li: último"). CSS ({"margen": "0px 0px 0px 0px"}); $ (". Btn li: primero"). addclass ("ON"; li: primero "). show (); $ (". Btn Li "). Cada (función (índice, elemento) {$ (elemento) .Click (function () {i = index; $ (this) .addclass (" on "). SiBlings (). RemoVeCLass (" on "); $ (". Pic (PIC li "). eq (index) .animate ({opacidad:" show "}, 300) .siblings (). animate ({opacidad:" escondite "}, 300);}) $ (elemento) .Hover (function () {clearinterval (setinter);}, function () {Outplay ();});}) out_fun = function () listLen) {i ++;} else {i = 0;}; $ (". Btn Li"). Eq (i) .addclass ("On"). Siblings (). RemoveClass ("On"); $ (". li "). eq (i) .animate ({opacidad:" show "}, 300) .siblings (). Animate ({Opacidad:" Ocultar "}, 300);} Outplay = function () {setinter = setInterval (" out_fun () ", speen);} outPlay ();})