原生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实现轮播效果+学前端的感受(防止走火入魔)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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
You might like
收集的PHP中与数组相关的函数
2007/03/22 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
php封装一个异常的处理类
2017/06/08 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python字典简介以及用法详解
2016/11/15 Python
python解析基于xml格式的日志文件
2017/02/25 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python yield和Generator函数用法详解
2020/02/10 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
详解Python流程控制语句
2020/10/28 Python
Python request post上传文件常见要点
2020/11/20 Python
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
大学自我鉴定
2013/12/20 职场文书
上海世博会口号
2014/06/19 职场文书
学习十八大演讲稿
2014/09/15 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
体育教师个人工作总结
2015/02/09 职场文书
个人总结怎么写
2015/02/26 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
社会实践单位意见
2015/06/05 职场文书
可可西里观后感
2015/06/08 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书