Плагин! Плагин! Я слышу, как люди просят этот плагин и этот плагин каждый день. Конечно, использование сторонних плагинов может значительно повысить эффективность разработки, но в качестве новичка мне все еще нравится реализовать их сам, главным образом потому, что у меня есть время!
Сегодня я поделюсь с вами, как писать картинки карусели с использованием Native JS
Пожилые люди могут игнорировать следующую чушь:
Прежде чем начать, позвольте мне рассказать о моем опыте обучения фронт-концу. Это должно быть около двух месяцев сегодня. Это в основном занимает 6-10 часов учебы каждый день, чисто самообучение, и говорят, что обучение не является надежным! В настоящее время я изучаю только три основных элемента (HTML5, CSS3, JavaScript), и все другие знания все еще оцениваются в плане обучения ... У меня в периоде путаницы, и я не знаю, чему сначала научиться! Независимо от того, что давайте сначала разберем три основных пункта. Если у вас есть хорошие предложения, я надеюсь, что вы можете дать мне несколько советов!
От HTML5 до CSS3 я чувствовал, что фронт был довольно простым, поэтому я чувствовал себя немного уверенно и мотивированным. Тогда я выучил JS. Раньше я изучал C# и Apple Swift. Они оба являются объектно-ориентированными и сильными языками, которые являются относительно продвинутыми. Тем не менее, я все еще люблю фронт, поэтому я повернулся сюда и начал изучать JS. Это было легко, но я чувствовал, что этот язык был немного грязным и отличался от других! Есть некоторые вещи, которые нелегко понять в авторитетном руководстве. Если вы не можете этого сделать, просто посмотрите больше на Baidu и больше посмотрите на понимание других людей, таких как закрытие и прототипы, и постепенно вы можете овладеть ими. На этом этапе вы, возможно, постепенно поняли, что фронт-конец включает в себя много вещей! Существует множество сторонних библиотек, фреймворков и т. Д., И многое другое. Короче говоря, новые существительные продолжают появляться перед вашими глазами. Некоторые говорят, что это будет устаревшим, и это будет мейнстрим, что так хаотично! Очень грязный! Как мне пойти дальше? Чему сначала научиться? Чему узнать позже?
Я сейчас на этом этапе. Иногда я не могу смотреть ни на что в течение двух дней подряд, не могу спать и расстроиться, то есть я одержим этим!
Я просто подумал, что со мной не так? Я не могу понять! Забудьте об этом, сделайте перерыв и тренируйте свое тело! Просто пробежь и бродите! Думаю: как вернуться в штат!
Позже я сделал это: дайте себе конфеты! (Сделайте несколько простых примеров самостоятельно)
Я обнаружил, что конфеты настолько милая, что я могу это сделать! Чувство выполненного долга неторопливо, и мотивация полна! Я только что написал один случай за другим. Если я не понимаю или не знаком с API, я переведу документ (я сам напишу его перед прочтением кода других людей, и я прочитаю его снова, если я действительно не смогу). Постепенно я чувствовал, что я действительно вернулся и начал вставать!
Я также посмотрел на то, какие люди требуются большинству компаний, которые в настоящее время набирают подход, а затем разработали новый план обучения для себя. Конечно, потому что у меня сейчас есть время, я хочу сначала потратить время на то, чтобы сначала консолидировать три основных фонда, больше практиковать, а затем вернуться назад и снова прочитать документы, чтобы понять их основные и внутренние принципы! Независимо от того, что вы узнаете дальше, будет намного проще начать! В то же время, продолжайте понимать фронт-энд больше! Чтобы понять перспективы и направление этой профессии, состоит в том, чтобы установить для себя переднее мировоззрение, чтобы вы не потеряли направление, когда учитесь!
Что касается того, какие сторонние библиотеки и рамки должны быть изучены, я не знаю сейчас. JQ устарел? Вам нужно учиться? Я не знаю, поэтому мне это больше не волнует, просто сыграйте с родным сначала! Вы должны знать естественно в будущем!
Фактический бой начинается, следующее приведено код и демонстрация.
Я не могу научиться, ориентированному на объектно-ориентированный метод написания моих пожилых людей в данный момент, поэтому я могу написать только некоторые функции, ха-ха! (Изображение приходит из Интернета. Вы также можете вырезать картинку 300*200, чтобы просмотреть эффект. Нажмите кнопку «Оценка и выезд», чтобы запустить)
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; Заполнение: 0; Список стиля: нет; Текстовое декорация: нет; } #slide {position: Absolute; Верх: 100px; Слева: 50px; Ширина: 300px; Высота: 200px; Граница: 1px сплошной серый; } #slide .blog-name {display: block; позиция: абсолютно; Внизу: 0; слева: 0; Ширина: 100%; Высота: 25px; высота линии: 25px; фоновый цвет: RGBA (155,155,155,0,5); Z-Index: 4; курсор: указатель; Текст-интент: 3px; } #slide-nav {position: Absolute; Справа: 5px; Внизу: 5px; z-index: 5; } #slide-nav li {display: inline-block; Ширина: 16px; Текст-альбом: Центр; высота линии: 16px; граница радий: 5px; курсор: указатель; переполнение: скрыто; } #Slide-Nav Li: Hover,. Selected {foangy-color: #336699; Цвет: белый; } .slide-content1 {position: Absolute; Ширина: 300px; Высота: 200px; размер шрифта: 0; } .slide-content1 a {position: Absolute; курсор: указатель; } .slide-content1 a: посещение {color: black;} #model-btn {position: absolute; Верх: -25px; размер шрифта: 20px; } </style> <script> window.onload = function () {var sufuimagescrooller = function () {// несколько функций инструмента Function Show (img) {var id; for (var i = 0; i <= 21; i ++) {var op = i * 5; id = setTimeout (function (e) {setOpacity (img, e)} .bind (this, op), i * 50); } cleartimeout (id); } функция скрыть (img) {var id; for (var i = 0; i <= 21; i ++) {var op = 100 - i * 5; id = setTimeout (function (e) {setOpacity (img, e)} .bind (this, op), i * 20); } cleartimeout (id); } function getByid (id) {return document.getElementById (id); } function setOpacity (elem, level) {if (elem.filter) {elem.style.filter = "alpha (opacity =" + level + ")"; // Совместим с т.е.} else {elem.style.opacity = level/100; }} // (расширенный и прогрессивный режим) Функция функции тела inoutmodel (Nums, Navid, imgcontainerid, imginfoid, Delly) {// Предотвратить несколько щелчков кнопки выбора режима для создания более li if (getByid ('slide-nav'). ChildElementCount! == 0) {return} // Создать кнопку Navigation var nav '= []; var targetidext = 0; // Сохранить информацию о состоянии изображения var currentIdext = 0; // Сохранить информацию о состоянии изображения var frag = document.createdocumentfragment (); for (var i = 0; i <nums; i ++) {Nav [i] = fragment.AppendChild (document.createElement ('li')); // Метод AppendChild вернет Li Nav [i] .innerhtml = i+1; } getByid (vavid) .appendchild (frag); // инициализировать, чтобы отобразить первое изображение var imgs = getByid (imgcontainerid) .getelementsbytagname ('a'); var info = getByid (imginfoid); info.innerhtml = imgs [0] .title.slice (0,12)+'...'; NAV [0] .className = 'selected'; // Динамическое изменение имени класса LI, чтобы изменить его стиль для (var J = 1; j <Nav.Length; J ++) {setOpacity (imgs [j], 0); } // запустить автоматический карусель var id; function start (dower) {id = setInterval (function () {hide (imgs [cureentidext]); Nav [cureTidext] .classname = ''; if (targetxt <Nums-1) {targetidext ++;} else {targetDext = 0;} HumentIdext = targetDext; show (imgs [argetIdext xaslext =. 'selected'; } start (задержка); // Добавить событие для каждой навигационной кнопки для (var k = 0; k <nav.length; k ++) {nav [k] .onclick = function (event) {var e = event || window.event; // совместим с IE var T = Event.Target || Event.Srcelement; // совместим с IE var IDEX = parseInt (t.innerhtml) -1; console.log ('iDex:'+iDex+'t:'+targetidext+'c:'+cureEntidext); if (iDex === Хуман [CureEntidext]); NAV [CureTidext] .className = ''; humenidext = idex; Show (imgs [idex]); NAV [iDex] .className = 'selected'; info.innerhtml = imgs [idex] .title.slice (0,12)+'...'; }} getByid (vavid) .onmouseover = function () {clearInterval (id)}; getByid (vavid) .onmouseout = function () {start (dower)}; } // Функция с правой к левому режиму от RightModel (Nums, Navid, Imgcontainerid, Imginfoid, Delly) {alert ('блоггер ленив, забыл реализовать эту функцию! Пожалуйста, оставьте сообщение, если вам это нужно!'); } Функция FromTopModel (Nums, Navid, Imgcontainerid, imginfoid, Delly) {alert ('блоггер ленив, забыл реализовать эту функцию! Пожалуйста, оставьте сообщение, если вам это нужно!'); } return {inoutModel: inoutmodel, fromrightModel: fromrightModel, fromTopModel: fromTopModel: fromTopModel, getByid: getByid}} (); sufuimagescrooller.getbyId ('model-btn1'). onclick = function () {sufuimagescrooller.inoutmodel (5, 'slide-nav', 'slide-main', 'slide-info', 3500); }; sufuimagescrooller.getbyid ('model-btn2'). onclick = function () {sufuimagescrooller.frrightmodel (5, 'slide-nav', 'slide-main', 'slide-info', 3500); }; sufuimagescrooller.getbyid ('model-btn3'). onclick = function () {sufuimagescrooller.fromtopmodel (5, 'slide-nav', 'slide-main', 'slide-info', 3500); }; }; </script> </head> <body> <div id = "slide"> <a id = "slide-info" href = "http://www.cnblogs.com/susufufu/" target = "_ blank"> blog Sufu </a> <ul id = "slide-"> </ul> <div id = "slide main" <al id = " href = "http://www.cnblogs.com/susufufu/p/5749922.html" target = "_ blank"> <viv> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=1247027539,1217965501&fm=21&gp=0.jpg"> </div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5768431.html" target = "_ blank"> <viv> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=4286855119,2694540617&fm=21&gp=0.jpg"> </div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5738673.html" target = "_ blank"> <viv> <img src = "https://ss3.bdstatic.com/70cfv8sh_q1ynxgkpowk1hf6hhy/it/u=4042865154,1782505495&fm=21&gp=0.jpg"> </div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5714020.html" target = "_ blank"> <viv> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg"> </div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5759480.html" target = "_ blank"> <viv> <img src = "https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhy/it/u=4104312586,1589909074&fm=21&gp=0.jpg"> </div> </a> </div> <div идентификатор = "modemb =" </div> </a> </div> <div идентификатор ". id = "model-btn1" value = "постепенное прогрессивное"> <input type = "кнопка" id = "model-btn2" value = "справа налево"> <input type = "кнопка" id = "model-btn3" value = "Вверху внизу"> </div> </div> </body> </html>Вначале подумайте о том, как его реализовать: разве вы не используете таймер, чтобы изменить картинку и изменить непрозрачность картинки в катстоне?
1. Макет HTML относительно прост:
<ul id = "slide-nav"> </ul> <div id = "slide-main"> <a href = "" target = "_ blank"> <viv> <img src = "lg1.png"> </div> </a> ... </div> ...
Slide-Info используется для отображения заголовка изображения. Slide-Nav-это цифровая кнопка, Slide-Main-это контейнер с изображением, а ссылка изображения помещается внутри.
В теге нет, потому что он динамически создается через JS;
2. Пока вы испытываете настройки стилей CSS, вы их поймете. Обратите внимание на них:
• Прежде чем сделать свой собственный макет, лучше всего добавить границу в родительский элемент, чтобы вы могли понять сцену и, наконец, удалить ее.
• Ul Li и многие другие теги имеют набивку по умолчанию, и все должно быть установлено на 0;
*{маржа: 0; Заполнение: 0; Список стиля: нет; Текстовое декорация: нет; }Высота: 25px; и высота линии: 25px; два равны, так что персонажи могут быть центрированы
Z-индекс только относится к вашим братьям и детям и недействителен для родственников в стороне. Если вы хотите, чтобы он был показан перед родственниками в стороне, создайте предков родственников в стороне. Например, ваш дедушка - премьер -министр, а ваш второй хозяин - фермер, тогда все личности вашей семьи более благородны, чем все личности семьи вашего второго мастера.
• Позиция: абсолютно; это также связано с его отцом. Если его отец не установил позиционирование, оно ненадежно, поэтому продолжайте искать поддержку, пока он не найдет ее, а затем полагается на него, чтобы позиционировать ее!
• Если вы хотите достичь эффекта справа налево, помните размер шрифта: 0; Будьте ясны о расстоянии между картинками и держите картины плечом к плечу!
Как говорится, практика идеально подходит. Только когда CSS является твердым, можете ли вы контролировать макет! Например, следующая двойная компоновка может быть достигнута без позиционирования:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> body {margin: 0; Заполнение: 0; } .Header, .footer {ширина: 100%; Высота: 50px; высота линии: 50px; Текст-альбом: Центр; Фоно-цвета: зеленый цвета; } .container {overflow: hidden; *Zoom: 1; } .left {float: left; Ширина: 100px; высота: 100px; Мяглевая маржа: -100%; фоновый цвет: зеленый; } .main {float: left; Ширина: 100%; высота: 100px; фоновый цвет: серый; } .right {float: left; Ширина: 200px; высота: 100px; Мяглевая маржа: -200px; фоновый цвет: золото; } .center {padding-left: 100px; Право накладки: 200px; } </style> </head> <body> <div> Header </div> <div> <div> main-center </div> </div> <div> слева </div> <div> right </div> </div> <div> нижний колоннет </div> </body> </html>Реализация кода
Сначала напишите контур:
var sufuimagescrooller = function () {function getById (id) {...} // Universal Element Function функция setOpacity (elem, level) {...} // Установить функцию прозрачно ...} // Основная функция корпуса возврата {inoutModel: inoutModel, ...}} ();Таким образом, вы можете вызвать метод inoutmodel через sufuimagescroller, sufuimagescrooller. inoutmodel (5, 'Slide-Nav', 'Slide-Main', 'Slide-Info', 3500);
INOUTMODEL (NUMS, NAVID, IMGContainerID, IMGINFOID, задержка).
После написания контура, он наполовину завершен. Остальные являются реализацией конкретных деталей. Я не очень хорошо писал. Я могу только сказать, что я реализовал эту функцию. Все думают об этом для себя. Если у вас есть хорошие предложения, пожалуйста, не стесняйтесь выдвигать их;
Начните с того, что вырезайте функцию inoutmodel, а затем идите глубже шаг за шагом. Ключ должен ввести его вручную. Если вы просто посмотрите на это, у вас не будет такого глубокого опыта!
Хорошо, в этом дело. Если вы не знаете, как перевести API документа самостоятельно, вы также можете оставить сообщение, чтобы спросить меня
Приведенная выше статья «Ощущение реализации эффектов карусели от местного JS + изучения фронта (предотвращение одержимости)-это все контент, которым я делюсь с вами. Я надеюсь, что вы сможете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.