原生JS實(shí)現(xiàn)輪播效果+學(xué)前端的感受(防止走火入魔)
插件！插件！天天聽到有人求這個(gè)插件，那個(gè)插件的，當(dāng)然，用第三方插件可以大幅提高開發(fā)效率，但作為新手，我還是喜歡自己來(lái)實(shí)現(xiàn)，主要是我有時(shí)間！
今天我來(lái)給大家分享下用原生JS實(shí)現(xiàn)圖片輪播的寫法
前輩們可以無(wú)視下面這段廢話：
在開始之前，先說(shuō)下我學(xué)前端到現(xiàn)在的一點(diǎn)感受。到今天應(yīng)該有兩個(gè)月左右了吧，基本每天6-10小時(shí)的學(xué)習(xí)時(shí)間，純自學(xué)，據(jù)說(shuō)培訓(xùn)不靠譜！本人目前的階段是只會(huì)三大件（HTML5、CSS3、javascript）,其它所有知識(shí)都還排在學(xué)習(xí)計(jì)劃后面....現(xiàn)在正處在迷茫期，不知道下面該先學(xué)什么了！不管了，先把三大件整溜一點(diǎn)再說(shuō)吧，前輩們?nèi)粲惺裁春玫慕ㄗh，希望指點(diǎn)！
從HTML5到CSS3，一路過(guò)來(lái)，感覺前端挺簡(jiǎn)單的，就有點(diǎn)信心滿滿，動(dòng)力十足，接著學(xué)JS，以前學(xué)過(guò)C#、蘋果的swift，都是面向?qū)ο蟮膹?qiáng)類型的語(yǔ)言，比較先進(jìn)，不過(guò)我還是喜歡前端，所以轉(zhuǎn)到這里來(lái)了，開始學(xué)JS也覺得挺容易的，就是感覺這門語(yǔ)言有點(diǎn)亂，跟別人不太一樣！而權(quán)威指南有些東西不容易弄明白，沒辦法，就多百度，多看別人對(duì)一些比如閉包、原型等概念的理解，慢慢的也就能掌握的7788了，到了這個(gè)階段，你也許已經(jīng)慢慢的了解到，原來(lái)前端它包括很多東西！一堆的第三方類庫(kù)、框架等等，還有很多其它東西，總之，新名詞不斷的在你眼前冒出來(lái)，有的說(shuō)這個(gè)要過(guò)時(shí)了，那個(gè)即將是主流，好亂！好亂！接下去我該怎么走？先學(xué)什么？后學(xué)什么？
我目前就處在這個(gè)階段，有時(shí)候會(huì)連續(xù)兩天什么都看不下去，也睡不著覺，心煩意亂，就是：走火入魔了！
我就想啊，我這是怎么了？想不明白啊！算了，先休息下，鍛煉下身體吧！就去跑步，瞎逛！一邊思考：怎么讓自己重新進(jìn)入狀態(tài)！
后來(lái)我是這么做的：給自己點(diǎn)糖吃?。ㄗ约合葎?dòng)手做一些比較簡(jiǎn)單的實(shí)例）
我發(fā)現(xiàn)，這糖還真甜，我居然能做出來(lái)！成就感悠然而生，動(dòng)力也就十足了！我就一個(gè)實(shí)例接著一個(gè)實(shí)例的寫，不懂、對(duì)API不熟悉就翻文檔（在看別人的代碼之前自己先寫，實(shí)在不會(huì)了再看），慢慢的，我感覺自己真的又回來(lái)了，開始步入正軌了！
我還特地看了下，目前大部分招前端的公司都需要什么樣的人，然后重新給自己制定了學(xué)習(xí)計(jì)劃，當(dāng)然，因?yàn)檠巯挛矣袝r(shí)間，所以我想拿一段時(shí)間出來(lái)先鞏固下3大基礎(chǔ)，多練習(xí)，然后回頭再過(guò)一遍文檔，多了解它們的基本的、內(nèi)在的原理！下一步不管學(xué)什么，就容易上手的多了！同時(shí)，繼續(xù)多了解前端！多了解這個(gè)職業(yè)的前景和走向，就是給自己建立一個(gè)前端的世界觀，這樣，學(xué)起來(lái)才不會(huì)迷失方向！
至于該學(xué)哪些第三方類庫(kù)、框架，我目前也不知道，JQ過(guò)時(shí)了嗎？需不需學(xué)？我也不知道，也先不管了，就先玩玩原生吧！以后應(yīng)該自然就知道了吧！
實(shí)戰(zhàn)開始，下面是代碼和演示，
前輩的面向?qū)ο髮懛?，目前本人還學(xué)不來(lái)，我只會(huì)寫一些函數(shù)，呵呵?。▓D片來(lái)自網(wǎng)絡(luò)，也可自己切個(gè)300*200圖片來(lái)查看效果，點(diǎn)擊‘漸進(jìn)漸出'按鈕開始）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#slide{
position: absolute;
top: 100px;
left: 50px;
width: 300px;
height: 200px;
border: 1px solid gray;
}
#slide .blog-name{
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25px;
line-height: 25px;
background-color: rgba(155,155,155,0.5);
z-index: 4;
cursor: pointer;
text-indent: 3px;
}
#slide-nav{
position: absolute;
right: 5px;
bottom: 5px;
z-index: 5;
}
#slide-nav li{
display: inline-block;
width: 16px;
text-align: center;
line-height: 16px;
border-radius: 5px;
cursor: pointer;
overflow:hidden;
}
#slide-nav li:hover,.selected{
background-color: #336699;
color: white;
}
.slide-content1{
position: absolute;
width: 300px;
height: 200px;
font-size: 0;
}
.slide-content1 a{
position: absolute;
cursor: pointer;
}
.slide-content1 a:visited{color: black;}
#model-btn{
position: absolute;
top: -25px;
font-size: 20px;
}
</style>
<script>
window.onload = function(){
var sufuImageScrooller = function(){
//幾個(gè)工具函數(shù)
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);
}
function hide(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 + ")"; //兼容IE
}else{
elem.style.opacity = level/100;
}
}
//(漸進(jìn)漸出模式)主體函數(shù)
function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){
//防止多次點(diǎn)擊模式選擇按鈕創(chuàng)建更多的li
if(getById('slide-nav').childElementCount !== 0){return}
//創(chuàng)建導(dǎo)航按鈕
var nav = [];
var targetIdext = 0; //保存圖片狀態(tài)信息
var cureentIdext = 0; //保存圖片狀態(tài)信息
var frag = document.createDocumentFragment();
for(var i=0;i<nums;i++){
nav[i] = frag.appendChild(document.createElement('li')); //appendChild方法會(huì)返回該li
nav[i].innerHTML = i+1;
}
getById(navId).appendChild(frag);
//初始化為顯示第一張圖片
var imgs = getById(imgContainerId).getElementsByTagName('a');
var info = getById(imgInfoId);
info.innerHTML = imgs[0].title.slice(0,12)+'...';
nav[0].className = 'selected'; //動(dòng)態(tài)改變li的className來(lái)改變它的樣式
for(var j=1;j<nav.length;j++){
setOpacity(imgs[j],0);
}
//開始自動(dòng)輪播
var id;
function start(delay){
id = setInterval(function(){
hide(imgs[cureentIdext]);
nav[cureentIdext].className = '';
if(targetIdext<nums-1){
targetIdext ++;
}else{
targetIdext = 0;
}
cureentIdext = targetIdext;
show(imgs[targetIdext]);
nav[targetIdext].className = 'selected';
info.innerHTML = imgs[targetIdext].title.slice(0,12)+'...';
},delay);
}
start(delay);
//為每個(gè)導(dǎo)航按鈕添加事件
for(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){return;}
hide(imgs[cureentIdext]);
nav[cureentIdext].className = '';
cureentIdext = idex;
show(imgs[idex]);
nav[idex].className = 'selected';
info.innerHTML = imgs[idex].title.slice(0,12)+'...';
}
}
getById(navId).onmouseover = function(){clearInterval(id)};
getById(navId).onmouseout = function(){start(delay)};
}
//從右向左模式函數(shù)
function fromRightModel(nums,navId,imgContainerId,imgInfoId,delay){
alert('博主偷懶,忘記實(shí)現(xiàn)這個(gè)函數(shù)了!需要請(qǐng)留言!');
}
function fromTopModel(nums,navId,imgContainerId,imgInfoId,delay){
alert('博主偷懶,忘記實(shí)現(xiàn)這個(gè)函數(shù)了!需要請(qǐng)留言!');
}
return {
inOutModel: inOutModel,
fromRightModel: fromRightModel,
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.fromRightModel(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" class="blog-name" target="_blank">蘇福的博客</a>
<ul id="slide-nav">
</ul>
<div id="slide-main" class="slide-content1 slide-content2">
<a class="a-img" title="用原生JS讀寫CSS樣式的方法總結(jié)" target="_blank">
<div>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1247027539,1217965501&fm=21&gp=0.jpg">
</div>
</a>
<a class="a-img" title="DOM中的事件處理概覽與原理" target="_blank">
<div>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4286855119,2694540617&fm=21&gp=0.jpg">
</div>
</a>
<a class="a-img" title="選取文檔元素的方法總結(jié)" target="_blank">
<div>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4042865154,1782505495&fm=21&gp=0.jpg">
</div>
</a>
<a class="a-img" title="窗口、窗體之間的關(guān)系" target="_blank">
<div>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg">
</div>
</a>
<a class="a-img" title="你真的知道setTimeout是如何運(yùn)行的嗎?" target="_blank">
<div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4104312586,1589909074&fm=21&gp=0.jpg">
</div>
</a>
</div>
<div id="model-btn">
<input type="button" id="model-btn1" value="漸進(jìn)漸出">
<input type="button" id="model-btn2" value="從右向左">
<input type="button" id="model-btn3" value="從上至下">
</div>
</div>
</body>
</html>
一開始，先想，該怎么實(shí)現(xiàn)：不就利用定時(shí)器改變圖片，過(guò)場(chǎng)改變圖片的opacity嗎？
一、html排版比較簡(jiǎn)單：
<ul id="slide-nav">
</ul>
<div id="slide-main" class="slide-content1">
<a class="a-img" title="" href="" target="_blank">
<div>
<img src="lg1.png">
</div>
</a>
...
</div>
...
slide-info用來(lái)顯示圖片標(biāo)題，slide-nav是數(shù)字按鈕，slide-main就是圖片容器了，里面放圖片鏈接，
標(biāo)簽里面沒寫li，因?yàn)樗峭ㄟ^(guò)JS動(dòng)態(tài)創(chuàng)建的；
二、CSS樣式的設(shè)置，只要你親自去體驗(yàn)，就都能明白了，注意點(diǎn)：
•自己布局前，先最好把父元素加border，這樣一幕了然，最后再去掉
•ul li 等很多標(biāo)簽?zāi)J(rèn)是有padding的，所有要把它設(shè)為0；
*{ margin: 0; padding: 0; list-style: none; text-decoration: none; }
height: 25px;和line-height: 25px;兩個(gè)相等，可以讓字居中
z-index 只相對(duì)于你的兄弟和子輩，對(duì)于旁系的親戚無(wú)效，如果想讓它顯示在旁系的親戚前面，就設(shè)置旁系的親戚的祖先，比如你的爺爺是宰相，你的二爺是農(nóng)民，那么你們家所有人身份都比你二爺家的所有人的身份都尊貴
•position: absolute;也是和他的父輩有關(guān)系的，父輩沒設(shè)置定位，靠不住啊，那就繼續(xù)往上找依靠，直到找到為止，然后依靠他來(lái)定位！
•如果你要實(shí)現(xiàn)從右向左的效果，記住font-size:0;清楚圖片之間的間距，讓圖片肩并肩！
俗話說(shuō)，熟能生巧，只有CSS基礎(chǔ)扎實(shí)，才能把控好布局！比如下面這個(gè)雙飛翼布局，不需要定位就能實(shí)現(xiàn)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.header,.footer{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: greenyellow;
}
.container{
overflow: hidden;
*zoom: 1;
}
.left{
float: left;
width: 100px;
height: 100px;
margin-left: -100%;
background-color: green;
}
.main{
float: left;
width: 100%;
height: 100px;
background-color: gray;
}
.right{
float: left;
width: 200px;
height: 100px;
margin-left: -200px;
background-color: gold;
}
.center{
padding-left: 100px;
padding-right: 200px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="main">
<div class="center">main-center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
三、代碼的實(shí)現(xiàn)
先寫大綱：
var sufuImageScrooller = function(){
function getById(id){...} //通用獲取元素對(duì)象
function setOpacity(elem,level){...} //設(shè)置透明度
function hide(img){...} //淡入
function show(omg){...} //淡出
function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){ ... } //主函數(shù)體
return {
inOutModel: inOutModel,
...
}
}();
這樣的寫法就可以通過(guò)sufuImageScrooller來(lái)調(diào)用inOutModel方法了，sufuImageScrooller. inOutModel(5,'slide-nav','slide-main','slide-info',3500);
inOutModel(nums,navId,imgContainerId,imgInfoId,delay)參數(shù)：nums創(chuàng)建li數(shù)量，必須和圖片數(shù)量對(duì)應(yīng)，navId數(shù)字按鈕容器id，imgContainerId圖片容器id，imgInfoId顯示圖片title信息id，delay指定切換圖片延遲時(shí)間；
大綱寫出來(lái)了，就完成了一大半了，其它就是具體細(xì)節(jié)代碼的實(shí)現(xiàn)了，我寫的不是很好，只能說(shuō)實(shí)現(xiàn)了這個(gè)功能，大家自己琢磨，如果有好的建議歡迎提出；
從inOutModel函數(shù)開始切入，然后步步深入，關(guān)鍵在于動(dòng)手打出來(lái)，光看的話體會(huì)沒那么深刻！
好了，就介紹到這一步了，不會(huì)的自己多翻文檔API，也可留言問我
以上這篇原生JS實(shí)現(xiàn)輪播效果+學(xué)前端的感受(防止走火入魔)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用apply方法實(shí)現(xiàn)javascript中的對(duì)象繼承
javascript中的對(duì)象繼承的方法有很多，在接下來(lái)的文章中為大家介紹下使用apply方法是如何實(shí)現(xiàn)的2013-12-12
20行JS代碼實(shí)現(xiàn)網(wǎng)頁(yè)刮刮樂效果
下面小編就為大家?guī)?lái)一篇20行JS代碼實(shí)現(xiàn)網(wǎng)頁(yè)刮刮樂效果。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
下面小編就為大家?guī)?lái)一篇JavaScript DOM 對(duì)象深入了解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
EasyUi combotree 實(shí)現(xiàn)動(dòng)態(tài)加載樹節(jié)點(diǎn)
這篇文章主要介紹了EasyUi combotree 實(shí)現(xiàn)動(dòng)態(tài)加載樹節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2016-04-04
微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果示例
這篇文章主要介紹了微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果,結(jié)合實(shí)例形式分析了微信小程序線性漸變及圓形漸變的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
使用SyntaxHighlighter實(shí)現(xiàn)HTML高亮顯示代碼的方法
syntaxhighlighter是一個(gè)小開源項(xiàng)目，它可以在網(wǎng)頁(yè)中對(duì)各種程序源代碼語(yǔ)法進(jìn)行加亮顯示。2010-02-02
有關(guān)IE6下拉框圖層問題，一直困擾著大家，下面有個(gè)不錯(cuò)的方法大家可以嘗試操作下2014-01-01
教你修改element-ui源碼給el-dialog添加全屏功能
el-dialog組件提供了fullscreen功能，但是無(wú)法滿足業(yè)務(wù)需求。系統(tǒng)使用了許多dialog，不方便重新封裝dialog組件，故直接對(duì)源碼進(jìn)行修改，這篇文章主要介紹了修改element-ui源碼給el-dialog添加全屏功能,需要的朋友可以參考下2022-11-11
回文數(shù)是指正序（從左向右）和倒序（從右向左）讀都是一樣的整數(shù),下面這篇文章主要給大家介紹了關(guān)于如何利用JS判斷整數(shù)x是否是回文數(shù)的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細(xì)介紹了Javascript技術(shù)棧中的四種依賴注入，感興趣的小伙伴們可以參考一下2016-02-02