Я случайно видел эту маленькую вещь, которую я написал раньше, и опубликовал ее, поддерживая щелчок, чтобы переключиться и автоматическую карусель для новичков, чтобы увидеть!
Код заключается в следующем:
<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 src = "Img/Pic_3.jpg"/> </li> <li> <img src = "pic_4.jpg"/> </li> <li> <img src = ". /> </li> <li> <img src = "img/pic_5.jpg"/> </li> </ul> <ul> <li> Проект 1 </li> <li> Проект 2 </li> <li> Проект 3 </li> <li> Проект 4 </li> </ul> </div>
HTML
Здесь вам просто нужно изменить путь изображения на свой местный.
.scroll_div {ширина: 1000px; Высота: 370px; Поле: 0 Авто; Padding: 10px;}. Scroll_div .pic {ширина: 820px; Высота: 370px; переполнение: скрыто; позиция: относительно; float: left;}. scroll_div .pic li {ширина: 820px; Высота: 370px; позиция: абсолютно; Верх: 0; слева: 0; дисплей: none;}. scroll_div .btn li {width: 173px;}. scroll_div .btn li {width: 173px; Высота: 66px; дисплей: блок; Плавание: осталось; Текст-альбом: Центр; Цвет: #ffff; Шрифт: 18px/100% "Microsoft Yahei"; шрифт-вес: жирный шрифт; Фон:#008dd8; маржинальный бат: 10px; высота линии: 66px; Cursor: pointer;}. scroll_div .btn li.on {founale:#d73737;} li {list-style: none;}CSS
$ (function () {var listlen = $ (". Pic li"). Length, i = 0, setInter, speen = 3000;/*pic carousel*/$ (". btn li: last"). CSS ({"Margin": "0px 0px 0px 0px"}); ". li: First "). Show (); $ (". Btn li "). Каждый (функция (index, element) {$ (element) .click (function () {i = index; $ (this) .addclass (" on "). li "). eq (index) .Animate ({opacity:" show "}, 300) .siblings (). Animate ({opacity:" hide "}, 300);}) $ (element) .hover (function () {clearInterval (setInter);}, function () {Outplay ();});}); ListLen) {i ++;} else {i = 0;}; $ (". Btn li"). eq (i) .AdDClass ("on"). Siblars (). removeClass ("on"); $ (". Pic li "). eq (i) .Animate ({opacity:" show "}, 300) .siblings (). Animate ({opacity:" hide "}, 300);} Outplay = function () {setInter = setInterval (" out_fun () ", speen);