原生JS实现轮播效果+学前端的感受(防止走火入魔)

插件插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间!

今天我来给大家分享下用原生JS实现图片轮播的写法

前辈们可以无视下面这段废话:

在开始之前,先说下我学前端到现在的一点感受。到今天应该有两个月左右了吧,基本每天6-10小时的学习时间,纯自学,据说培训不靠谱!本人目前的阶段是只会三大件(HTML5、CSS3、javascript),其它所有知识都还排在学习计划后面....现在正处在迷茫期,不知道下面该先学什么了!不管了,先把三大件整溜一点再说吧,前辈们若有什么好的建议,希望指点!

从HTML5到CSS3,一路过来,感觉前端挺简单的,就有点信心满满,动力十足,接着学JS,以前学过C#、苹果的swift,都是面向对象的强类型的语言,比较先进,不过我还是喜欢前端,所以转到这里来了,开始学JS也觉得挺容易的,就是感觉这门语言有点乱,跟别人不太一样!而权威指南有些东西不容易弄明白,没办法,就多百度,多看别人对一些比如闭包、原型等概念的理解,慢慢的也就能掌握的7788了,到了这个阶段,你也许已经慢慢的了解到,原来前端它包括很多东西!一堆的第三方类库、框架等等,还有很多其它东西,总之,新名词不断的在你眼前冒出来,有的说这个要过时了,那个即将是主流,好乱!好乱!接下去我该怎么走?先学什么?后学什么?

我目前就处在这个阶段,有时候会连续两天什么都看不下去,也睡不着觉,心烦意乱,就是:走火入魔了!

我就想啊,我这是怎么了?想不明白啊!算了,先休息下,锻炼下身体吧!就去跑步,瞎逛!一边思考:怎么让自己重新进入状态!

后来我是这么做的:给自己点糖吃!(自己先动手做一些比较简单的实例)

我发现,这糖还真甜,我居然能做出来!成就感悠然而生,动力也就十足了!我就一个实例接着一个实例的写,不懂、对API不熟悉就翻文档(在看别人的代码之前自己先写,实在不会了再看),慢慢的,我感觉自己真的又回来了,开始步入正轨了!

我还特地看了下,目前大部分招前端的公司都需要什么样的人,然后重新给自己制定了学习计划,当然,因为眼下我有时间,所以我想拿一段时间出来先巩固下3大基础,多练习,然后回头再过一遍文档,多了解它们的基本的、内在的原理!下一步不管学什么,就容易上手的多了!同时,继续多了解前端!多了解这个职业的前景和走向,就是给自己建立一个前端的世界观,这样,学起来才不会迷失方向!

至于该学哪些第三方类库、框架,我目前也不知道,JQ过时了吗?需不需学?我也不知道,也先不管了,就先玩玩原生吧!以后应该自然就知道了吧!

实战开始,下面是代码和演示,

前辈的面向对象写法,目前本人还学不来,我只会写一些函数,呵呵!(图片来自网络,也可自己切个300*200图片来查看效果,点击‘渐进渐出'按钮开始)

<Meta charset="UTF-8">

<ul id="slide-nav">

<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 id="model-btn">
<input type="button" id="model-btn1" value="渐进渐出">
<input type="button" id="model-btn2" value="从右向左">
<input type="button" id="model-btn3" value="从上至下">

一开始,先想,该怎么实现:不就利用定时器改变图片,过场改变图片的opacity吗?

一、html排版比较简单:

<div id="slide-main" class="slide-content1">
<a class="a-img" title="" href="" target="_blank">

...
...

slide-info用来显示图片标题,slide-nav是数字按钮,slide-main就是图片容器了,里面放图片链接

标签里面没写li,因为它是通过JS动态创建的;

二、CSS样式的设置,只要你亲自去体验,就都能明白了,注意点:

•自己布局前,先最好把父元素加border,这样一幕了然,最后再去掉

•ul li 等很多标签默认是有padding的,所有要把它设为0;

z-index 只相对于你的兄弟和子辈,对于旁系的亲戚无效,如果想让它显示在旁系的亲戚前面,就设置旁系的亲戚的祖先,比如你的爷爷是宰相,你的二爷是农民,那么你们家所有人身份都比你二爷家的所有人的身份都尊贵

•position: absolute;也是和他的父辈有关系的,父辈没设置定位,靠不住啊,那就继续往上找依靠,直到找到为止,然后依靠他来定位!

•如果你要实现从右向左的效果,记住font-size:0;清楚图片之间的间距,让图片肩并肩!

俗话说,熟能生巧,只有CSS基础扎实,才能把控好布局!比如下面这个双飞翼布局,不需要定位就能实现:

<Meta charset="UTF-8">

三、代码的实现

先写大纲:

获取元素对象 function setOpacity(elem,level){...} //设置透明度 function hide(img){...} //淡入 function show(omg){...} //淡出 function inOutModel(nums,delay){ ... } //主函数体 return { inOutModel: inOutModel,... } }();

这样的写法就可以通过sufuImageScrooller来调用inOutModel方法了,sufuImageScrooller. inOutModel(5,3500); inOutModel(nums,delay)参数:nums创建li数量,必须和图片数量对应,navId数字按钮容器id,imgContainerId图片容器id,imgInfoId显示图片title信息id,delay指定切换图片延迟时间;

大纲写出来了,就完成了一大半了,其它就是具体细节代码的实现了,我写的不是很好,只能说实现了这个功能,大家自己琢磨,如果有好的建议欢迎提出; 从inOutModel函数开始切入,然后步步深入,关键在于动手打出来,光看的话体会没那么深刻!

好了,就介绍到这一步了,不会的自己多翻文档API,也可留言问我

以上这篇原生JS实现轮播效果+学前端的感受(防止走火入魔)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...