Все знакомы с веб -сайтом HAO123. Мне не нужно больше говорить о конкретных эффектах. Заинтересованные друзья могут ссылаться на визуализации. Следующий редактор поделится с вами идеей реализации кода. Конечно, вы можете надлежащим образом добавить, изменить и удалять код в соответствии с вашими потребностями.
Ключевой код заключается в следующем:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Teal> Picture Carousel </title> <style> .warp {width: 600px; рост: 750px; позиция: относительно; Margin: 30px auto 0; overflow: hidden;}#width: 600px: 600px: 750px; позиция: абсолютно; верхняя: 0px; слева: 0px; переполнение: hidden;/*overflow-x: auto;*/}#box #con {width: 6000px; высота: 750px; overflow: hidden;}#conmg {float: слева; 0px; top: 366px; ширина: 36px; высота: 36px; фон: url (image/btnl.png) 0 0 no-repeat; cursor: pointer;}#btnr {положение: абсолют; справа: 0px; top: 366px; ширина: 36px; высота: 36px; found hrl (url/btnr. no-repeat; cursor: pointer;}#num {position: Absolute; внизу: 10px; слева: 148px; переполнение: скрыто; Центр; курсор: pointer;}#num li src = "Images/meinv3.jpg"> <img src = "Images/meinv4.jpg"> <img src = "Images/meinv5.jpg"> <img src = "Images/meinv6.jpg"> </div> <div id = "btnl"> </div> <div id = "btnr"> </ud "> </ud" </ud "</ud" </div> </div> </ud "</div> </ud" </ud id = "num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> </ul> </div> <script> var box = document.getElementById ('box'); var con = document.getElementByid ('con'); imgs = con.getElementsbytagname ('img'); var btnl = document.getElementById ('btnl'); var btnr = document.getElementbyId ('btnr'); var num = document.getElementbyId ('num'); var lis = num.getElementsBytagname ('liT'); imgw = imgs [0] .clientwidth; var x = 0; function imgscroll () {// переключатель изображения var start = box.scrollleft; var end = var*x; var inmed = end-start; var minstep = 0; var maxstep = 30; var steplength = изменение/maxstep; clearInterval (timer2); timer2 = setInterval (function () {minstep ++; // console.log (minstep); if (minstep> = maxstep) {clearInterval (timer2);} start+= steplength; box.scrollleft = start; i ++) {lis [i] .classname = 'none';} lis [x] .classname = 'select';} function move () {// Прокрутка по умолчанию влево каждые 3 секунды ClearInterval (timer1); Timer1 = setInterval (function () {x ++; if (x> = imgs.length) {x = 0; i = 0; btnr.onclick = function () {clearInterval (timer1); x ++; if (x> = imgs.length) {x = 0;} imgscroll (); move ();} btnl.onclick = function () {clearInterval (timer1); x-; x <0) {x = imgs.length-1;} imgscroll (); move ();} for (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onclick = function () {x = this.index;Выше приведено эффект карусели изображения страницы навигации JS HAO123, представленная вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!