编程 Javascript

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

Posted in Javascript onAugust 21, 2016

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

今天我来给大家分享下用原生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实现轮播效果+学前端的感受(防止走火入魔)

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Maps Javascript

Jan 22 Javascript

new Date()问题在ie8下面的处理方法

Jul 31 Javascript

让JavaScript的Alert弹出框失效的方法禁止弹出警告框

Sep 03 Javascript

JavaScript 实现打印,打印预览,打印设置

Dec 30 Javascript

详谈angularjs中路由页面强制更新的问题

Apr 24 Javascript

基于Jquery Ajax type的4种类型(详解)

Aug 02 jQuery

angularjs数组判断是否含有某个元素的实例

Feb 27 Javascript

Vue.js实现图片的随意拖动方法

Mar 08 Javascript

Vue实现渲染数据后控制滚动条位置(推荐)

Dec 09 Javascript

解决vue+elementui项目打包后样式变化问题

Aug 03 Javascript

详解React路由传参方法汇总记录

Nov 29 Javascript

使用 JavaScript 制作页面效果

Apr 21 Javascript

Javascript发送AJAX请求实例代码

Aug 21 #Javascript

原生js实现jquery函数animate()动画效果的简单实例

Aug 21 #Javascript

原生JS实现图片轮播与淡入效果的简单实例

Aug 21 #Javascript

JavaScript实战(原生range和自定义特效)简单实例

Aug 21 #Javascript

原生JS实现-星级评分系统的简单实例

Aug 21 #Javascript

JSONP和批量操作功能的实现方法

Aug 21 #Javascript

全面解析标签页的切换方式

Aug 21 #Javascript