Недавно я не могу повысить свой интерес к CSS, потому что я возмущался картинками каруселей и плохо научился, поэтому мне потребовалось некоторое время, чтобы познакомиться с JS. Затем я подошел к черной дороге и написал эффект карусели и изображения, угасающих в использовании jQuery и JS. Дорога к обучению в будущем очень долго, я надеюсь, что пойду дальше и дальше по передней дороге `(∩_∩) ′
В принципе, есть много учебных пособий в Интернете, проще говоря.
Затухание, но на самом деле, здесь используется только эффект затухания. Для каждого выцветшего изображения мы устанавливаем его дисплей на блокировку, а другие - нет, поэтому есть только одна картина, которая на самом деле существует и занимает позицию в потоке документов. Перед установкой метода отображения изображения постепенно повышение прозрачности изображения даст людям ощущение исчезновения.
На самом деле, есть еще один ключевой момент в коде JS. Закрытие используется в коде, поэтому у меня есть небольшое понимание закрытия. Позвольте мне сказать еще несколько слов здесь:
Официальное объяснение закрытия заключается в том, что закрытие - это выражение (обычно функция), которое имеет много переменных и среды, связанной с этими переменными, поэтому эти переменные также являются частью выражения.
Самый простой способ - это:
Когда внутренняя функция B функции A ссылается на переменную внешнюю функцию A, создается закрытие.
Сказал это более тщательно. Так называемое «закрытие» состоит в том, чтобы определить другую функцию как функцию метода в корпусе конструктора, а функция метода этого объекта, в свою очередь, относится к временным переменным во внешней функции. Это позволяет косвенно поддерживаться временным переменным значением, используемом исходным телом конструктора, если целевой объект всегда может сохранять свой метод в течение своего срока службы.
Хотя начальный вызов конструктора закончился, и имена временных переменных исчезли, значение переменной всегда можно ссылаться в методе целевого объекта, и значение можно получить только в этом методе. Даже если один и тот же конструктор снова вызывается, будут созданы только новые объекты и методы. Новая временная переменная только соответствует новому значению и не зависит от последнего вызова.
Следующая функция является функцией закрытия. Зачем использовать закрытие? Разве это невозможно для обычных функций? Это действительно невозможно. Цель закрытия здесь состоит в том, чтобы сохранить ссылку на флаг. Если нет закрытия, для локальных переменных, если функция выполняется один раз, то есть флаг выполняется один раз, локальная переменная будет собираться и очищаться механизмом сбора мусора. Мы ссылаемся на переменную флага через функцию в периодическом вызове. Когда второе выполнение выполнено, флаг потеряет свое значение, а корпус функции не может выполнить правильный результат. Когда я начал касаться передней части, я почувствовал, что закрытие было необязательным. Дело в том, что эта вещь действительно важна!
var setVal = function (s, flag) {return function () {pos = math.abs (parseint (pic.style [point])); if (flag> 0) {// Текущая точка больше, чем координата целевой точки, изображение движется вправо, левое значение уменьшает pic.style [point] = -math.floor (pos +(parseint (s*ssinglesize) - pos)*speed) +'px'; } if (flag <0) {pic.style [point] = -math.ceil (pos +(parseint (s*ssinglesize) - pos)*speed) +'px'; } if (pos == (ssinglesize * s)) {теперь = s; ClearInterval (интервал); }}};Вот код:
HTML
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> picsglide </title> <link href = "css/index.css" rel = "stylesship" type = "text/css"> <script type = "javascript" src = "js/jquery-1.3.2.js"> </script> <script src = "js/index.js"> </script> </head> <body onload = "init ()"> <div id = "picbox"> <ul class = "show_pic" style = "Left: 0"> <li class = "on". src = "imgs/ccc.jpg"/> </a> </li> <li> <img src = "imgs/aaa.jpg"/> </li> <li> <img src = "imgs/bbb.jpg"/> </li> <li> <img src = "imgs/ccc./> </li> <li> <img src =" src = "imgs/ccc.jpg"/> </li> <li> <img src = "imgs/ccc.jpg"/> </li> </ul> <div class = "bg"> </div> <ul class = "show_des"> <li> puss в сапогах </li> <li> puss 2 <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> Puss in Boots4 </li> <li> Puss in Boots5 </li> </ul> <ul class = "icon_num"> <li class = "on"> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </div> </html> </html> <li>
CSS
тело {font-size: 12px; } ul, li {padding: 0; поля: 0; Список стиля: нет; } #picbox {width: 610px; Высота: 205px; Маржа: 50px Auto; переполнение: скрыто; позиция: относительно; размер шрифта: 0;}/*изображение каруселя*/#picbox .show_pic {width: 3050px; позиция: Absolute;}#picx .show_pic li {float: left; Ширина: 610px; Высота: 205px; дисплей: нет; /*Дисплей: none;*/}#picbox .show_pic li.on {display: block;}#picbox .show_pic li img {display: block; Ширина: 610px; Высота: 205px;}#picbox .icon_num {position: Absolute; Внизу: 12px; Справа: 10px; z-index: 10;}#picbox .icon_num li {float: left; /*Фон: URL (/UploadFile/200912/28/fa15567738.gif) no -repeat -15px 0; */ ширина: 16px; Высота: 16px; размер шрифта: 16px; Цвет: #39F; Текст-альбом: Центр; курсор: указатель; Маржинавая правая: 5px;} #picbox .ICON_NUM li.on {founale: #000; непрозрачность: 0,5; }/*фон*/. bg {z-index: 1; позиция: абсолютно; Внизу: 0; Высота: 40px; Ширина: 610px; Фон: #000; непрозрачность: 0,6; Фильтр: alpha (непрозрачность = 60);}#picbox .show_des {width: 300px; Высота: 18px; позиция: абсолютно; Внизу: 11px; Слева: 15px; Цвет: #fff; z-index: 10;}#picbox .show_des li {display: none; высота линии: 18px; размер шрифта: 18px;}#picbox .show_des li.on {display: block;}младший
Функция CleanWhitEpace (oelement) {for (var i = 0; i <oelement.childnodes.length; i ++) {var node = oeelement.childnodes [i]; if (node.nodeType == 3 &&! // s/.test (node.nodevalue)) {node.parentnode.removechild (node); }}} // код карауширования this.layerglide = function (auto, obox, ssinglesize, во -вторых, fspeed, point) {var -интервал, тайм -аут; // два таймера var pos; // абсолютное значение текущего координат позиционирования формирование времени var = второе, теперь = 0; // Временное изображение перемещается один раз, теперь значение индекса текущего изображения var speed = fspeed // Скорость движения var задержка = второе * 1000; // интервал времени для каждого переключения изображения var picbox = document.getElementbyid (obox); CleanWhitEpace (Picbox); var pic = picbox.childnodes [0]; // Список изображений var des = picbox.childnodes [2] .getelementsbytagname ("li"); // Список изображений var con = picbox.childnodes [3] .getelementsbytagname ("li"); var sum = con.length; var setVal = function (s, flag) {return function () {pos = math.abs (parseint (pic.style [point])); if (flag> 0) {// Текущая точка больше, чем координата целевой точки, изображение движется вправо, левое значение уменьшает pic.style [point] = -math.floor (pos +(parseint (s*ssinglesize) - pos)*speed) +'px'; } if (flag <0) {pic.style [point] = -math.ceil (pos +(parseint (s*ssinglesize) - pos)*speed) +'px'; } if (pos == (ssinglesize * s)) {теперь = s; ClearInterval (интервал); }}}}; var Changeto = function (num) {for (var i = 0; i <sum; i ++) {con [i] .classname = ""; des [i] .classname = ""; }; con [num] .classname = "on"; des [num] .classname = "on"; var flag = math.abs (parseint (pic.style [point]))-ssinglesize * num; интервал = setInterval (setVal (num, flag), время); //bkg.hide (). fadein (); } функция AutoGlide () {clearTimeOut (интервал); Теперь = (теперь == (parseint (sum) -1))? 0: (сейчас + 1); Чанто (сейчас); timeout = settimeout (AutoGlide, Doply); } function isAuto () {if (auto) {timeout = settimeout (autoGlide, delay); }; } isauto (); // запустить автоматическую карусель для (var i = 0; i <sum; i ++) // навигационная кнопка {con [i] .onmouseover = (function (i) {return function () {cleartimeout (timeout); clearInterval (интервал); Changeto (i); this.onmouseout = isAuto (); this.layerfader = function (auto, obox, второй, график, скорость) {var evural, тайм -аут; // два таймера var сейчас = 0; // Время изображение перемещается один раз, теперь значение индекса текущего изображения var var dolember = второе * 1000; // временной интервал каждого изображения переключается var picbox = document.getElementbyid (obox); CleanWhitEpace (Picbox); var pic = picbox.childnodes [0] .getelementsbytagname ("li"); var des = picbox.childnodes [2] .getelementsbytagname ("li"); var con = picbox.childnodes [3] .getelementsbytagname ("li"); var sum = con.length; Функция Fadein (elem) {setoPacity (elem, 0); // Первоначально полностью прозрачный для (var i = 0; i <= count; i ++) {// изменение прозрачности 20 * 5 = 100 (function (i) {var level = i * 5; // Значение изменения прозрачности каждый раз (function () {setOpacity (elem, level)}, i * speed);}) (i); }} функция setOpacity (elem, level) {// установить прозрачность if (elem.filters) {elem.style.filter = "alpha (opacity =" + level + ")"; } else {elem.style.opacity = level / 100; }} var Changeto = function (num) {for (var i = 0; i <sum; i ++) {con [i] .classname = ""; des [i] .classname = ""; pic [i] .classname = ""; }; Fadein (PIC [num]); con [num] .classname = "on"; des [num] .classname = "on"; pic [num] .classname = "on"; //bkg.hide (). fadein (); } функция AutoGlide () {clearTimeOut (интервал); Теперь = (теперь == (parseint (sum) -1))? 0: (сейчас + 1); Чанто (сейчас); timeout = settimeout (AutoGlide, Doply); } function isAuto () {if (auto) {timeout = settimeout (autoGlide, delay); }; } isauto (); // запустить автоматическую карусель для (var i = 0; i <sum; i ++) // навигационная кнопка {con [i] .onmouseover = (function (i) {return function () {cleartimeout (timeout); // clearInterval (интервал); Changeto (i); this.onmouseout = isAuto ();jQuery намного проще, чем JS, поэтому я не буду вдаваться в подробности здесь. Когда я был на младшем курсе, я взял урок дизайна. Учитель сказал нам программировать для интерфейсов, а не для реализаций. Старайтесь не появляться постоянными в коде, чтобы улучшить возможности повторного использования кода. Поэтому при написании кода все переменные факторы упоминаются параметрам. Последнее предложение, для операции JS DOM, JS Native является королевством. Только используя больше и практикуя больше, вы можете хорошо справиться с этим. Я надеюсь, что вы пойдете дальше и дальше в будущем.
Приведенный выше простой пример нативного JS реализует карусель изображения и эффекты затухания-это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.