В этой статье используется конкретный код для использования JS для создания влияния карусели на домашнюю страницу общих веб -сайтов для вашей ссылки. Конкретный контент заключается в следующем
<! Doctype html> <html lang = "en"> <Head> <meta charset = "utf-8"> <title> картинка carousel </title> <style> .warp {width: 600px; Высота: 750px; позиция: относительно; Маржа: 30px Auto 0; переполнение: скрыто; } #box {width: 600px; Высота: 750px; позиция: абсолютно; Верх: 0px; слева: 0px; переполнение: скрыто; /*overflow-x: auto;*/} #box #con {width: 6000px; Высота: 750px; переполнение: скрыто; } #con img {float: left; Ширина: 600px; Высота: 750px; } #btnl {position: Absolute; слева: 0px; Верх: 366px; Ширина: 36px; Высота: 36px; Фон: URL (Images/btnl.png) 0 0 no-repeat; курсор: указатель; } #btnr {position: Absolute; Справа: 0px; Верх: 366px; Ширина: 36px; Высота: 36px; Фон: URL (Images/btnr.png) 0 0 no-repeat; курсор: указатель; } #num {position: Absolute; Внизу: 10px; Слева: 148px; переполнение: скрыто; Список стиля: нет; } #num li {float: left; Полевая: 0 5px; размер шрифта: 16px; высота линии: 25px; Высота: 25px; Ширина: 25px; Фон: #CCC; Текст-альбом: Центр; курсор: указатель; } #num li.select {фоновый цвет: green; Цвет: белый; } </style> </head> <body> <div> <div id = "box"> <div id = "con"> <img src = "images/meinv1.jpg"> <img src = "images/meinv2.jpg"> <img src = "Images/meinv3.jpg"> <img src = "meinv. src = "Images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> </div> <div id = "btnl"> </div> <div id = "btnr"> </div> <ul id = "num"> <li> 1 </li> <li> 2 </li> </li> </li> <li> </li> <li> <li> <li> <li> <li> 5 </li> <li> 6 </li> </div> <script> var box = document.getElementById ('box'); var con = document.getElementbyId ('con'); var imgs = con.getElementsbytagname ('img'); var btnl = document.getElementbyId ('btnl'); var btnr = document.getElementById ('btnr'); var num = document.getElementbyId ('num'); var num = document.getElementbyId ('num'); var num = document.getElementbyId ('num'); var btnr = document.getElementbyId ('num'); var num = document.getElementbyId ('num'); var num = document.getElementbyId ('num'); var lis = num.getElementsbytagname ('li'); var Timer1 = null, timer2 = null; var imgw = imgs [0] .clientWidth; var x = 0; function imgscroll () {// переключатель изображения var start = box.scrollleft; var end = imgw*x; var изменение = 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;}, 20) для (var i = 0; i <lis.length; i++{lis]. } lis [x] .classname = 'select'; } function move () {// Прокрутка по умолчанию влево каждые 3 секунды ClearInterval (Timer1); timer1 = setInterval (function () {x ++; if (x> = imgs.length) {x = 0;} imgscroll (); for (var i = 0; i <lis.length; i ++) {lis [i] .classname = 'none'; lis [x] .classname = 'select';}}, 3000); } move (); // запустить функцию прокрутки по умолчанию; btnr.onclick = function () {clearInterval (timer1); x ++; if (x> = imgs.length) {x = 0; } imgscroll (); двигаться(); } btnl.onclick = function () {clearInterval (timer1); x--; if (x <0) {x = imgs.length-1; } imgscroll (); двигаться(); } for (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onclick = function () {x = this.index; imgscroll (); двигаться(); }} </script> </body> </html>Специфический эффект основан на эффекте карусели страницы навигации HAO123. Вы можете перейти на веб -сайт, чтобы обозначить его.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.