插件！插件！天天听到有人求这个插件，那个插件的，当然，用第三方插件可以大幅提高开发效率，但作为新手，我还是喜欢自己来实现，主要是我有时间！
今天我来给大家分享下用原生JS实现图片轮播的写法
前辈们可以无视下面这段废话：
在开始之前，先说下我学前端到现在的一点感受。到今天应该有两个月左右了吧，基本每天6-10小时的学习时间，纯自学，据说培训不靠谱！本人目前的阶段是只会三大件（HTML5、CSS3、javascript）,其它所有知识都还排在学习计划后面....现在正处在迷茫期，不知道下面该先学什么了！不管了，先把三大件整溜一点再说吧，前辈们若有什么好的建议，希望指点！
从HTML5到CSS3，一路过来，感觉前端挺简单的，就有点信心满满，动力十足，接着学JS，以前学过C#、苹果的swift，都是面向对象的强类型的语言，比较先进，不过我还是喜欢前端，所以转到这里来了，开始学JS也觉得挺容易的，就是感觉这门语言有点乱，跟别人不太一样！而权威指南有些东西不容易弄明白，没办法，就多百度，多看别人对一些比如闭包、原型等概念的理解，慢慢的也就能掌握的7788了，到了这个阶段，你也许已经慢慢的了解到，原来前端它包括很多东西！一堆的第三方类库、框架等等，还有很多其它东西，总之，新名词不断的在你眼前冒出来，有的说这个要过时了，那个即将是主流，好乱！好乱！接下去我该怎么走？先学什么？后学什么？
我目前就处在这个阶段，有时候会连续两天什么都看不下去，也睡不着觉，心烦意乱，就是：走火入魔了！
我就想啊，我这是怎么了？想不明白啊！算了，先休息下，锻炼下身体吧！就去跑步，瞎逛！一边思考：怎么让自己重新进入状态！
后来我是这么做的：给自己点糖吃！（自己先动手做一些比较简单的实例）
我发现，这糖还真甜，我居然能做出来！成就感悠然而生，动力也就十足了！我就一个实例接着一个实例的写，不懂、对API不熟悉就翻文档（在看别人的代码之前自己先写，实在不会了再看），慢慢的，我感觉自己真的又回来了，开始步入正轨了！
我还特地看了下，目前大部分招前端的公司都需要什么样的人，然后重新给自己制定了学习计划，当然，因为眼下我有时间，所以我想拿一段时间出来先巩固下3大基础，多练习，然后回头再过一遍文档，多了解它们的基本的、内在的原理！下一步不管学什么，就容易上手的多了！同时，继续多了解前端！多了解这个职业的前景和走向，就是给自己建立一个前端的世界观，这样，学起来才不会迷失方向！
至于该学哪些第三方类库、框架，我目前也不知道，JQ过时了吗？需不需学？我也不知道，也先不管了，就先玩玩原生吧！以后应该自然就知道了吧！
实战开始，下面是代码和演示，
前辈的面向对象写法，目前本人还学不来，我只会写一些函数，呵呵！（图片来自网络，也可自己切个300*200图片来查看效果，点击‘渐进渐出'按钮开始）
<!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(){ //几个工具函数 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; } } //(渐进渐出模式)主体函数 function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){ //防止多次点击模式选择按钮创建更多的li if(getById('slide-nav').childElementCount !== 0){return} //创建导航按钮 var nav = []; var targetIdext = 0; //保存图片状态信息 var cureentIdext = 0; //保存图片状态信息 var frag = document.createDocumentFragment(); for(var i=0;i<nums;i++){ nav[i] = frag.appendChild(document.createElement('li')); //appendChild方法会返回该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'; //动态改变li的className来改变它的样式 for(var j=1;j<nav.length;j++){ setOpacity(imgs[j],0); } //开始自动轮播 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); //为每个导航按钮添加事件 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)}; } //从右向左模式函数 function fromRightModel(nums,navId,imgContainerId,imgInfoId,delay){ alert('博主偷懒,忘记实现这个函数了!需要请留言!'); } function fromTopModel(nums,navId,imgContainerId,imgInfoId,delay){ alert('博主偷懒,忘记实现这个函数了!需要请留言!'); } 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> <a href="https://www.cnblogs.com/susufufu/" target="_blank">苏福的博客</a> <ul> </ul> <div> <a title="用原生JS读写CSS样式的方法总结" href="https://www.cnblogs.com/susufufu/p/5749922.html" target="_blank"> <div> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1247027539,1217965501&fm=21&gp=0.jpg"> </div> </a> <a title="DOM中的事件处理概览与原理" href="https://www.cnblogs.com/susufufu/p/5768431.html" target="_blank"> <div> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4286855119,2694540617&fm=21&gp=0.jpg"> </div> </a> <a title="选取文档元素的方法总结" href="https://www.cnblogs.com/susufufu/p/5738673.html" target="_blank"> <div> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4042865154,1782505495&fm=21&gp=0.jpg"> </div> </a> <a title="窗口、窗体之间的关系" href="https://www.cnblogs.com/susufufu/p/5714020.html" target="_blank"> <div> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg"> </div> </a> <a title="你真的知道setTimeout是如何运行的吗?" href="https://www.cnblogs.com/susufufu/p/5759480.html" target="_blank"> <div> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4104312586,1589909074&fm=21&gp=0.jpg"> </div> </a> </div> <div> <input type="button" value="渐进渐出"> <input type="button" value="从右向左"> <input type="button" value="从上至下"> </div> </div> </body> </html>
一开始，先想，该怎么实现：不就利用定时器改变图片，过场改变图片的opacity吗？
一、html排版比较简单：