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

2024-10-02 11:58:40

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

今天我来给大家分享下用原生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和jQuery实现淡入淡出轮播效果

本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码,分享给大家供大家参考,具体内容如下: 基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果. html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播&l
原生JS实现匀速图片轮播动画

JS实现轮播图实现结果图: 需求: 1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片,定时轮播图片:鼠标在图片上时暂停 4 左右两侧可点击轮播图片一.布局部分 html部分 <div class="w main clearfix"> <div class="slider"> <ul class="imgs"
原生js实现无缝轮播图效果

话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="ima
原生js实现图片轮播特效

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0
原生JS实现图片轮播与淡入效果的简单实例

最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会
原生JS实现旋转木马式图片轮播插件

本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看
原生js实现移动开发轮播图、相册滑动特效

使用方法: 分别引用css文件和js文件如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script
原生js和jquery实现图片轮播淡入淡出效果

图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后
原生js实现图片层叠轮播切换效果

本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下效果图: 功能描述: 自定义图片尺寸: 每隔一段时间自动滚动图片: 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化: 鼠标移上图片,显示当前图片的详细信息: 点击按钮向前向后滚动: 详细代码: html代码: <!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topi
原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

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

相关推荐

随机推荐