Eu acidentalmente vi essa pequena coisa que escrevi antes e a publiquei, apoiando o clique para alternar e o carrossel automático para iniciantes do front-end!
O código é o seguinte:
<div> <ul> <li> <img src = "img/pic_1.jpg"/> </li> <li> <img src = "img/pic_2.jpg"/> </li> <li> <img src = "img/picg"/> <li> <i40 /> </li> <li> <img src = "img/pic_5.jpg"/> </li> </ul> <ul> <li> Projeto 1 </li> <li> Projeto 2 </li> <li> Projeto 3 </li> <li> Projeto 4 </li> </ul> </li> <li>
html
Aqui você só precisa alterar o caminho da imagem para o seu local.
.scroll_div {width: 1000px; Altura: 370px; margem: 0 automático; preenchimento: 10px;}. scroll_div .pic {width: 820px; Altura: 370px; estouro: oculto; Posição: relativa; float: esquerda;}. scroll_div .pic li {width: 820px; Altura: 370px; Posição: Absoluto; topo: 0; Esquerda: 0; Exibir: Nenhum;}. scroll_div .btn li {width: 173px;}. scroll_div .btn li {width: 173px; Altura: 66px; exibição: bloco; flutuar: esquerda; Alinhamento de texto: centro; Cor: #ffff; Fonte: 18px/100% "Microsoft Yahei"; Peso da fonte: negrito; Antecedentes:#008dd8; Margin-Bottom: 10px; altura da linha: 66px; Cursor: Pointer;}. scroll_div .btn li.on {background:#d73737;} li {estilo de list: nenhum;}CSS
$ (function () {var listlen = $ (". pic li"). comprimento, i = 0, setInter, speen = 3000;*pic carrossel*/$ (". btn li: last"). css ({"margin": "0px 0px 0px 0px"} ($ (". li: primeiro "). show (); $ (". li "). Eq (índice) .animate ({opacidade:" show "}, 300) .Siblings (). Animate ({opacity:" hide "}, 300);}) $ (elemento) .Hover (function () {ClearInterval (setInter);}, function () {outPlay (); listlen) {i ++;} else {i = 0;}; $ (". btn li"). Eq (i) .addclass ("on"). irmãos (). removeclass ("on"); $ (" li "). Eq (i). Aanimate ({Opacity:" Show "}, 300) .Siblings (). Animate ({Opacity:" Hide "}, 300);} outplay = function () {setInter = setInterval (" out_fun () ", Speen);