插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间!
今天我来给大家分享下用原生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 id="slide"> <a id="slide-info" class="blog-name" href="http://www.cnblogs.com/susufufu/" target="_blank">苏福的博客</a> <ul id="slide-nav"> </ul> <div id="slide-main" class="slide-content1 slide-content2"> <a class="a-img" title="用原生JS读写CSS样式的方法总结" href="http://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 class="a-img" title="DOM中的事件处理概览与原理" href="http://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 class="a-img" title="选取文档元素的方法总结" href="http://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 class="a-img" title="窗口、窗体之间的关系" href="http://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 class="a-img" title="你真的知道setTimeout是如何运行的吗?" href="http://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 id="model-btn"> <input type="button" id="model-btn1" value="渐进渐出"> <input type="button" id="model-btn2" value="从右向左"> <input type="button" id="model-btn3" value="从上至下"> </div> </div> </body> </html>
一开始,先想,该怎么实现:不就利用定时器改变图片,过场改变图片的opacity吗?
一、html排版比较简单:
<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用来显示图片标题,slide-nav是数字按钮,slide-main就是图片容器了,里面放图片链接,
标签里面没写li,因为它是通过JS动态创建的;
二、CSS样式的设置,只要你亲自去体验,就都能明白了,注意点:
•自己布局前,先最好把父元素加border,这样一幕了然,最后再去掉
•ul li 等很多标签默认是有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基础扎实,才能把控好布局!比如下面这个双飞翼布局,不需要定位就能实现:
<!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>
三、代码的实现
先写大纲:
var sufuImageScrooller = function(){ function getById(id){...} //通用获取元素对象 function setOpacity(elem,level){...} //设置透明度 function hide(img){...} //淡入 function show(omg){...} //淡出 function inOutModel(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实现轮播效果+学前端的感受(防止走火入魔)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。
本文向大家介绍原生js实现焦点轮播图效果,包括了原生js实现焦点轮播图效果的使用技巧和注意事项,需要的朋友参考一下 原生js焦点轮播图主要注意这几点: 1、前后按钮实现切换,同时注意辅助图 2、中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index 3、间隔调用与无限轮播。 4、注意在动画时要停止按钮,或者说上一个动画完毕下一个动画才能执行 5、另外在切换图片的时候,
本文向大家介绍原生js实现无缝轮播图效果,包括了原生js实现无缝轮播图效果的使用技巧和注意事项,需要的朋友参考一下 话不多说,请看代码 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!
本文向大家介绍原生js实现网易轮播图效果,包括了原生js实现网易轮播图效果的使用技巧和注意事项,需要的朋友参考一下 一、实现效果图 二、分析布局 主盒子里分上下两个小盒子(1和2)。 包含图片的盒子占两张图片的宽(3),处于上盒子中,当前图片在上盒子(1)中,其它图片在盒子(3)的右侧等待播放。 下边的盒子(2)包括了六个小方块及定位在主盒子上的两个箭头。 三、html部分 四、CSS部分 五
本文向大家介绍原生js和css实现图片轮播效果,包括了原生js和css实现图片轮播效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了javascript图片轮播效果的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍原生js实现无限循环轮播图效果,包括了原生js实现无限循环轮播图效果的使用技巧和注意事项,需要的朋友参考一下 知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 2.当前图片轮播的圆点变色显示: 因为每次点击index+1 所以当前的index-1就是button的索引 3.实现动画滚动效果: 原理就是把每次的偏移量分为
本文向大家介绍原生js实现图片轮播特效,包括了原生js实现图片轮播特效的使用技巧和注意事项,需要的朋友参考一下 本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习。 运行效果图: 具体代码: 希望本文所述对大家学习javascript程序设计有所帮助。