資訊專欄INFORMATION COLUMN
第一步 HTML我的First Blood。
學(xué)習(xí)javascript越來(lái)越吃力，以前需要實(shí)現(xiàn)什么功能，各種插件上，照著例子，直接復(fù)制粘貼，也不知道啥原理，現(xiàn)在后悔了，人總要為自己做過(guò)的一切買單，這么做是好事也是壞事，廢話不多說(shuō)，自己體會(huì)哈！
心路歷程
先搞個(gè)盒子，把這些幻燈片的圖片裝起來(lái)，還要有左右滑動(dòng)箭頭，還有啥，就是切換的點(diǎn)點(diǎn)
接下來(lái)要搞樣式了，想想我們一般剛打開(kāi)一個(gè)幻燈片是什么樣子，先寫出來(lái)樣式
心路歷程
表示首先要清除樣式，然后開(kāi)始。細(xì)說(shuō)不來(lái)啊，中間加了個(gè)fadeIn過(guò)度下，顯得不那么尷尬，那兩個(gè)箭頭用了絕對(duì)定位，垂直居中的一種top(calc)方法
var slideIndex = 1;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("dot");
goSlide(1);
function prevSlide() {
goSlide(slideIndex - 1);
}
function nextSlide() {
goSlide(slideIndex + 1);
}
//switch to some slide
function goSlide(n) {
//考慮頭尾
n = n == 0 ? slides.length : n;
n = n == (slides.length + 1) ? 1 : n;
//main
for (let i = 0; i < slides.length; i++) {
if (i == n - 1) {
slides[i].style.display = "block";
} else {
slides[i].style.display = "none";
}
}
for (let j = 0; j < dots.length; j++) {
if (j == n - 1) {
dots[j].className += dots[j].className.indexOf(" active") > 0 ? "" : " active";
} else {
dots[j].className = dots[j].className.replace(" active", "");
}
}
//賦值給index
slideIndex = n;
}
心路歷程
首先我得解決，我想到哪一頁(yè)就到哪一頁(yè)，那我得知道當(dāng)前頁(yè)的頁(yè)碼slideIndex,所以我得先定義一下，初始為1，然后就可以寫一個(gè)方法goSlide(n)去到哪一頁(yè)的實(shí)現(xiàn)，接下來(lái)再考慮怎么去切換前一張和后一張，只要知道slideIndex那這個(gè)就很簡(jiǎn)單了，所以最后別忘了賦新的值給slideIndex
一個(gè)半調(diào)子程序員，基礎(chǔ)很不扎實(shí)，第一次強(qiáng)迫自己寫寫文章，雖然很簡(jiǎn)單，相信自己跟著需求、邏輯走再難的路也能走通
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87298.html
摘要：概覽大法好今夜秋風(fēng)陣陣，霧霾層層。布局選擇多媒體，字體響應(yīng)就是屌。說(shuō)起來(lái)?xiàng)l目繁多，乍看之下與之前比起來(lái)復(fù)雜了好多。圓角指的即使一般正式的寫法為效果請(qǐng)看任意一個(gè)按鈕即可寫到此處不禁跟大家說(shuō)，最好還是配合預(yù)編譯來(lái)寫。 CSS3 概覽 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好 今夜秋風(fēng)陣陣，霧霾層層。不禁讓人想作詩(shī)，不過(guò)...
摘要：函數(shù)更多的用處在于封裝一些需要加前綴的屬性，或是多個(gè)參數(shù)的屬性，同時(shí)命名一定要足夠的語(yǔ)義化。適當(dāng)嵌套，以保持的優(yōu)雅。有時(shí)要考慮兼容性，需要避免編譯某條屬性，方法即在值的前面加一個(gè)符號(hào)具體如下安裝同時(shí)推薦在線編譯網(wǎng)站，能夠?qū)崟r(shí)看到效果。 LESS 是一門CSS預(yù)編譯語(yǔ)言，猶記得當(dāng)初打算使用CSS預(yù)編譯語(yǔ)言的時(shí)候，可選的有SASS、LESS、Stylus三門，剛好那個(gè)時(shí)候在學(xué)習(xí)bootst...
摘要：前言只有光頭才能變強(qiáng)好的，今天我們要上鉑金段位了，如果還沒(méi)經(jīng)歷過(guò)青銅和白銀和黃金階段的，可以先去蹭蹭經(jīng)驗(yàn)再回來(lái)從零單排學(xué)青銅從零單排學(xué)白銀從零單排學(xué)黃金這篇文章主要講的是主從復(fù)制。 前言 只有光頭才能變強(qiáng) 好的，今天我們要上鉑金段位了，如果還沒(méi)經(jīng)歷過(guò)青銅和白銀和黃金階段的，可以先去蹭蹭經(jīng)驗(yàn)再回來(lái)： 從零單排學(xué)Redis【青銅】 從零單排學(xué)Redis【白銀】 從零單排學(xué)Redis【黃金...
摘要：因?yàn)槲蚁Ｍ@是一個(gè)系列的文章，所以開(kāi)始之前先簡(jiǎn)單說(shuō)一下，我?guī)缀鯖](méi)用過(guò)這個(gè)框架寫過(guò)項(xiàng)目，所以文章中難免會(huì)有一些比較外行的說(shuō)法。先整理用法，然后再整理自己的框架。 因?yàn)槲蚁Ｍ@是一個(gè)系列的文章，所以開(kāi)始之前先簡(jiǎn)單說(shuō)一下，我?guī)缀鯖](méi)用過(guò)vue這個(gè)框架寫過(guò)項(xiàng)目，所以文章中難免會(huì)有一些比較外行的說(shuō)法。當(dāng)然，我用過(guò)一些時(shí)間的angular，也曾經(jīng)解決過(guò)一些同行們vue方面的問(wèn)題。所以如果有人原因看的...
閱讀 1538·2023-04-26 02:03
閱讀 4729·2021-11-22 13:53
閱讀 4633·2021-09-09 11:40
閱讀 3801·2021-09-09 09:34
閱讀 2136·2019-08-30 13:18
閱讀 3511·2019-08-30 11:25
閱讀 3305·2019-08-26 14:06
閱讀 2554·2019-08-26 13:52
