原生JS实现轮播效果+学前端的感受(防止走火入魔)
插件！插件！天天听到有人求这个插件，那个插件的，当然，用第三方插件可以大幅提高开发效率，但作为新手，我还是喜欢自己来实现，主要是我有时间！
今天我来给大家分享下用原生JS实现图片轮播的写法
前辈们可以无视下面这段废话：
在开始之前，先说下我学前端到现在的一点感受。到今天应该有两个月左右了吧，基本每天6-10小时的学习时间，纯自学，据说培训不靠谱！本人目前的阶段是只会三大件（HTML5、CSS3、javascript）,其它所有知识都还排在学习计划后面....现在正处在迷茫期，不知道下面该先学什么了！不管了，先把三大件整溜一点再说吧，前辈们若有什么好的建议，希望指点！
从HTML5到CSS3，一路过来，感觉前端挺简单的，就有点信心满满，动力十足，接着学JS，以前学过C#、苹果的swift，都是面向对象的强类型的语言，比较先进，不过我还是喜欢前端，所以转到这里来了，开始学JS也觉得挺容易的，就是感觉这门语言有点乱，跟别人不太一样！而权威指南有些东西不容易弄明白，没办法，就多百度，多看别人对一些比如闭包、原型等概念的理解，慢慢的也就能掌握的7788了，到了这个阶段，你也许已经慢慢的了解到，原来前端它包括很多东西！一堆的第三方类库、框架等等，还有很多其它东西，总之，新名词不断的在你眼前冒出来，有的说这个要过时了，那个即将是主流，好乱！好乱！接下去我该怎么走？先学什么？后学什么？
我目前就处在这个阶段，有时候会连续两天什么都看不下去，也睡不着觉，心烦意乱，就是：走火入魔了！
我就想啊，我这是怎么了？想不明白啊！算了，先休息下，锻炼下身体吧！就去跑步，瞎逛！一边思考：怎么让自己重新进入状态！
后来我是这么做的：给自己点糖吃！（自己先动手做一些比较简单的实例）
我发现，这糖还真甜，我居然能做出来！成就感悠然而生，动力也就十足了！我就一个实例接着一个实例的写，不懂、对API不熟悉就翻文档（在看别人的代码之前自己先写，实在不会了再看），慢慢的，我感觉自己真的又回来了，开始步入正轨了！
我还特地看了下，目前大部分招前端的公司都需要什么样的人，然后重新给自己制定了学习计划，当然，因为眼下我有时间，所以我想拿一段时间出来先巩固下3大基础，多练习，然后回头再过一遍文档，多了解它们的基本的、内在的原理！下一步不管学什么，就容易上手的多了！同时，继续多了解前端！多了解这个职业的前景和走向，就是给自己建立一个前端的世界观，这样，学起来才不会迷失方向！
至于该学哪些第三方类库、框架，我目前也不知道，JQ过时了吗？需不需学？我也不知道，也先不管了，就先玩玩原生吧！以后应该自然就知道了吧！
实战开始，下面是代码和演示，
前辈的面向对象写法，目前本人还学不来，我只会写一些函数，呵呵！（图片来自网络，也可自己切个300*200图片来查看效果，点击‘渐进渐出'按钮开始）
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="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:1pxsolidgray;
}
#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-navli{
display:inline-block;
width:16px;
text-align:center;
line-height:16px;
border-radius:5px;
cursor:pointer;
overflow:hidden;
}
#slide-navli:hover,.selected{
background-color:#336699;
color:white;
}
.slide-content1{
position:absolute;
width:300px;
height:200px;
font-size:0;
}
.slide-content1a{
position:absolute;
cursor:pointer;
}
.slide-content1a:visited{color:black;}
#model-btn{
position:absolute;
top:-25px;
font-size:20px;
}
</style>
<script>
window.onload=function(){
varsufuImageScrooller=function(){
//几个工具函数
functionshow(img){
varid;
for(vari=0;i<=21;i++){
varop=i*5;
id=setTimeout(function(e){
setOpacity(img,e)
}.bind(this,op),i*50);
}
clearTimeout(id);
}
functionhide(img){
varid;
for(vari=0;i<=21;i++){
varop=100-i*5;
id=setTimeout(function(e){
setOpacity(img,e)
}.bind(this,op),i*20);
}
clearTimeout(id);
}
functiongetById(id){
returndocument.getElementById(id);
}
functionsetOpacity(elem,level){
if(elem.filter){
elem.style.filter="alpha(opacity="+level+")";//兼容IE
}else{
elem.style.opacity=level/100;
}
}
//(渐进渐出模式)主体函数
functioninOutModel(nums,navId,imgContainerId,imgInfoId,delay){
//防止多次点击模式选择按钮创建更多的li
if(getById('slide-nav').childElementCount!==0){return}
//创建导航按钮
varnav=[];
vartargetIdext=0;//保存图片状态信息
varcureentIdext=0;//保存图片状态信息
varfrag=document.createDocumentFragment();
for(vari=0;i<nums;i++){
nav[i]=frag.appendChild(document.createElement('li'));//appendChild方法会返回该li
nav[i].innerHTML=i+1;
}
getById(navId).appendChild(frag);
//初始化为显示第一张图片
varimgs=getById(imgContainerId).getElementsByTagName('a');
varinfo=getById(imgInfoId);
info.innerHTML=imgs[0].title.slice(0,12)+'...';
nav[0].className='selected';//动态改变li的className来改变它的样式
for(varj=1;j<nav.length;j++){
setOpacity(imgs[j],0);
}
//开始自动轮播
varid;
functionstart(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(vark=0;k<nav.length;k++){
nav[k].onclick=function(event){
vare=event||window.event;//兼容IE
vart=event.target||event.srcElement;//兼容IE
varidex=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)};
}
//从右向左模式函数
functionfromRightModel(nums,navId,imgContainerId,imgInfoId,delay){
alert('博主偷懒,忘记实现这个函数了!需要请留言!');
}
functionfromTopModel(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>
<divid="slide">
<aid="slide-info"class="blog-name"href="http://www.cnblogs.com/susufufu/"target="_blank">苏福的博客</a>
<ulid="slide-nav">
</ul>
<divid="slide-main"class="slide-content1slide-content2">
<aclass="a-img"title="用原生JS读写CSS样式的方法总结"href="http://www.cnblogs.com/susufufu/p/5749922.html"target="_blank">
<div>
<imgsrc="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1247027539,1217965501&fm=21&gp=0.jpg">
</div>
</a>
<aclass="a-img"title="DOM中的事件处理概览与原理"href="http://www.cnblogs.com/susufufu/p/5768431.html"target="_blank">
<div>
<imgsrc="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4286855119,2694540617&fm=21&gp=0.jpg">
</div>
</a>
<aclass="a-img"title="选取文档元素的方法总结"href="http://www.cnblogs.com/susufufu/p/5738673.html"target="_blank">
<div>
<imgsrc="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4042865154,1782505495&fm=21&gp=0.jpg">
</div>
</a>
<aclass="a-img"title="窗口、窗体之间的关系"href="http://www.cnblogs.com/susufufu/p/5714020.html"target="_blank">
<div>
<imgsrc="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg">
</div>
</a>
<aclass="a-img"title="你真的知道setTimeout是如何运行的吗?"href="http://www.cnblogs.com/susufufu/p/5759480.html"target="_blank">
<div>
<imgsrc="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4104312586,1589909074&fm=21&gp=0.jpg">
</div>
</a>
</div>
<divid="model-btn">
<inputtype="button"id="model-btn1"value="渐进渐出">
<inputtype="button"id="model-btn2"value="从右向左">
<inputtype="button"id="model-btn3"value="从上至下">
</div>
</div>
</body>
</html>
一开始，先想，该怎么实现：不就利用定时器改变图片，过场改变图片的opacity吗？
一、html排版比较简单：
<ulid="slide-nav"> </ul> <divid="slide-main"class="slide-content1"> <aclass="a-img"title=""href=""target="_blank"> <div> <imgsrc="lg1.png"> </div> </a> ... </div> ...
slide-info用来显示图片标题，slide-nav是数字按钮，slide-main就是图片容器了，里面放图片链接，
标签里面没写li，因为它是通过JS动态创建的；
二、CSS样式的设置，只要你亲自去体验，就都能明白了，注意点：
•自己布局前，先最好把父元素加border，这样一幕了然，最后再去掉
•ulli等很多标签默认是有padding的，所有要把它设为0；
*{margin:0;padding:0;list-style:none;text-decoration:none;}
height:25px;和line-height:25px;两个相等，可以让字居中
z-index只相对于你的兄弟和子辈，对于旁系的亲戚无效，如果想让它显示在旁系的亲戚前面，就设置旁系的亲戚的祖先，比如你的爷爷是宰相，你的二爷是农民，那么你们家所有人身份都比你二爷家的所有人的身份都尊贵
•position:absolute;也是和他的父辈有关系的，父辈没设置定位，靠不住啊，那就继续往上找依靠，直到找到为止，然后依靠他来定位！
•如果你要实现从右向左的效果，记住font-size:0;清楚图片之间的间距，让图片肩并肩！
俗话说，熟能生巧，只有CSS基础扎实，才能把控好布局！比如下面这个双飞翼布局，不需要定位就能实现：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="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>
<divclass="header">header</div>
<divclass="container">
<divclass="main">
<divclass="center">main-center</div>
</div>
<divclass="left">left</div>
<divclass="right">right</div>
</div>
<divclass="footer">footer</div>
</body>
</html>
三、代码的实现
先写大纲：
varsufuImageScrooller=function(){
functiongetById(id){...}//通用获取元素对象
functionsetOpacity(elem,level){...}//设置透明度
functionhide(img){...}//淡入
functionshow(omg){...}//淡出
functioninOutModel(nums,navId,imgContainerId,imgInfoId,delay){...}//主函数体
return{
inOutModel:inOutModel,
...
}
}();
这样的写法就可以通过sufuImageScrooller来调用inOutModel方法了，sufuImageScrooller.inOutModel(5,'slide-nav','slide-main','slide-info',3500);
inOutModel(nums,navId,imgContainerId,imgInfoId,delay)参数：nums创建li数量，必须和图片数量对应，navId数字按钮容器id，imgContainerId图片容器id，imgInfoId显示图片title信息id，delay指定切换图片延迟时间；
大纲写出来了，就完成了一大半了，其它就是具体细节代码的实现了，我写的不是很好，只能说实现了这个功能，大家自己琢磨，如果有好的建议欢迎提出；
从inOutModel函数开始切入，然后步步深入，关键在于动手打出来，光看的话体会没那么深刻！
好了，就介绍到这一步了，不会的自己多翻文档API，也可留言问我
以上这篇原生JS实现轮播效果+学前端的感受(防止走火入魔)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。