zoukankan      html  css  js  c++  java

  • 原生JS实现轮播+学前端的感受（防止走火入魔）

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

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

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

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

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

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

    后来我是这么做的：给自己点糖吃！（自己先动手做一些比较简单的实例）

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

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

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

    实战开始，下面是代码和演示，写法参考了这位前辈：仿QQ轮播图
    前辈的面向对象写法，目前本人还学不来，我只会写一些函数，呵呵！（图片来自网络，也可自己切个300*200图片来查看效果，点击‘渐进渐出’按钮开始）

    一开始，先想，该怎么实现：不就利用定时器改变图片，过场改变图片的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样式的设置，只要你亲自去体验，就都能明白了，注意点：

      1. 自己布局前，先最好把父元素加border，这样一幕了然，最后再去掉
      2. ul li 等很多标签默认是有padding的，所有要把它设为0；
        *{ margin: 0; padding: 0; list-style: none; text-decoration: none; }
      3. height: 25px;和line-height: 25px;两个相等，可以让字居中
      4. z-index只相对于你的兄弟和子辈，对于旁系的亲戚无效，如果想让它显示在旁系的亲戚前面，就设置旁系的亲戚的祖先，比如你的爷爷是宰相，你的二爷是农民，那么你们家所有人身份都比你二爷家的所有人的身份都尊贵
      5. position: absolute;也是和他的父辈有关系的，父辈没设置定位，靠不住啊，那就继续往上找依靠，直到找到为止，然后依靠他来定位！
      6. 如果你要实现从右向左的效果，记住font-size:0;清楚图片之间的间距，让图片肩并肩！

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

      三、代码的实现

      先写大纲:
      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，也可留言问我
  • 相关阅读:
    Linux中使用mysqldump对MySQL数据库进行定时备份
    Linux备份数据库,mysqldump命令实例详解
    laravel 怎么获取public路径
    laravel 返回值
    [Deep-Learning-with-Python]机器学习基础
    [Deep-Learning-with-Python]基于Keras的房价预测
    [Deep-Learning-with-Python]基于Kears的Reuters新闻分类
    基于Keras的imdb数据集电影评论情感二分类
    [Deep-Learning-with-Python]神经网络入手学习[上]
    [Deep-Learning-with-Python]神经网络的数学基础
  • 原文地址：https://www.cnblogs.com/susufufu/p/5787267.html
Copyright © 2011-2022 走看看