原生JS实现的轮播图功能详解

2024-11-28 20:06:10

本文实例讲述了原生JS实现的轮播图功能。分享给大家供大家参考，具体如下：

一、效果预览：

由于只能上传2M以下的图片，这里只截取了自动切换的效果：

二、编写语言

HTML、CSS、原生JS

三、编写思路

（一）HTML部分

1、.slide意为滑槽，里面存放所有图片；

2、.prev存放向左的箭头，.next存放向右的箭头；

3、pointer意为指示器，存放下方的五个切换按钮，每个切换按钮用span来表示；

4、.m-view，意为视窗，即每次看到图片的窗口，它存放以上所有的部件；

（二）CSS部分

1、.m-view设为相对定位，他的后代元素可以以它作为绝对定位的参照；

2、.slide、.prev、.next、pointer全都用绝对定位放到合适位置；

3、.slide的所有图片水平排列，且视窗.m-view的宽度设为只有一张图片那么宽，这样默认情况.slide还是会全部显示；当给.m-view设置overflow:hidden后子元素超出它的部分就会隐藏，就实现了只显示一张图片的效果；

（三）JS部分

1、切换功能：

设置一个切换函数toggle实现左切或者右切一张图，toggle有两个子函数leftToggle和rightToggle分别实现向左、向右切换一张图，将他们分别绑定到.prev和.next按钮的clik事件；

2、切换功能的淡入动画效果

只有1的话切换是立即产生的，没有过渡效果；这里利用定时器和步长将切换功能细化到更小的滑动操作leftStep和rightStep，leftToggle和rightToggle通过多次调用滑动操作来实现一次切换，这样就会产生动画效果；

3、跳转功能

对指示器的每个圆形按钮绑定跳转功能，跳转实际上是将.slide进行移动；

4、自动播放

只需要设置定时器，每隔一定时间执行切换即可；

四、我的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <style>
    .m-view,.m-view .slide img{
      position: relative;/*作为绝对定位的父元素*/
      width: 800px;
      height: 600px;
    }
    .m-view{
      overflow: hidden;/*将超出该div的子元素隐藏*/
    }
    .m-view .slide{
      position: absolute;
      width: 8000px;
      height: 600px;
    }
    .m-view .slide img{
      margin-right: -5px;
    }
    .m-view .prev,.m-view .next{
      position: absolute;
      top: 40%;
      font: 60px/60px Microsoft YaHei;
      color: #00BFFF;
    }
    .m-view .prev{
      left: 10px;
    }
    .m-view .next{
      right: 10px;
    }
    .m-view .pointer{
      position: absolute;
      bottom: 40px;
      left: 33%;
    }
    .m-view .pointer span{
      display: inline-block;/*水平排列*/
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin-right: 10px;
      background-color: #00FF00;
    }
    .m-view .pointer .on{/*点亮当前图片对应的圆圈*/
      background-color: #1E90FF;
    }
  </style>
</head>
<body>
  <div class="m-view">
    <div class="slide" style="left: -800px">
      <img src="../lunbo/5.jpg" alt="4">
      <img src="../lunbo/1.jpg" alt="0">
      <img src="../lunbo/2.jpg" alt="1">
      <img src="../lunbo/3.jpg" alt="2">
      <img src="../lunbo/4.jpg" alt="3">
      <img src="../lunbo/5.jpg" alt="4">
      <img src="../lunbo/1.jpg" alt="0">
    </div>
    <div class="prev"><</div>
    <div class="next">></div>
    <div class="pointer">
      <span class="button on" index="0"></span>
      <span class="button" index="1"></span>
      <span class="button" index="2"></span>
      <span class="button" index="3"></span>
      <span class="button" index="4"></span>
    </div>
  </div>
  <script type="text/javascript">
    var view=document.getElementsByClassName('m-view')[0];
    var slide=document.getElementsByClassName('slide')[0];
    var prev=document.getElementsByClassName('prev')[0];
    var next=document.getElementsByClassName('next')[0];
    var button=document.getElementsByClassName('button');
    var curIndex=0;//当前图片的索引位置
    var toggled=true;//是否正在切换，true表明切换已完成，此时才能切换
    /* Toggle函数实现切换一张图片的功能 */
    function Toggle () {
      var TIMER=50;//滑动一次所用的时间，它是setInterval的第二个参数
      var time=800;//每切换一张图片总共用的时长
      var times=time/TIMER;//每切换一张图片需滑动的次数
      var stepLenth=800/times;//每次滑动的步长
      var leftToggle=function () {
        var t1=times;
        function leftStep(){
          slide.style.left=parseInt(slide.style.left)+stepLenth+"px";
          t1--;
          if (!t1) {
            clearInterval(interval);
            curIndex--;
            if (curIndex<0) {
              slide.style.left=parseInt(slide.style.left)-4000+"px";
              curIndex=4;
            };
            toggled=true;
          };
        };
        if (toggled==true) {
          toggled=false;
          button[curIndex].className="button";
          if (curIndex!=0) {
            button[curIndex-1].className="button on";
          }else{
            button[curIndex+4].className="button on";
          }
          var interval=setInterval(leftStep,TIMER);
        };
      };
      var rightToggle=function () {
        var t2=times;
        function leftStep(){
          slide.style.left=parseInt(slide.style.left)-stepLenth+"px";
          t2--;
          if (!t2) {
            clearInterval(interval);
            curIndex++;
            if (curIndex>4) {
              slide.style.left=parseInt(slide.style.left)+4000+"px";
              curIndex=0;
            };
            toggled=true;
          };
        };
        if (toggled==true) {
          toggled=false;
          button[curIndex].className="button";
          if (curIndex!=4) {
            button[curIndex+1].className="button on";
          }else{
            button[curIndex-4].className="button on";
          };
          var interval=setInterval(leftStep,TIMER);
        };
      }
      this.leftToggle=leftToggle;//输出对外的接口
      this.rightToggle=rightToggle;
    };
    var toggle=new Toggle();
    prev.onclick=function () {
      toggle.leftToggle();
    };
    next.onclick=function () {
      toggle.rightToggle();
    };
    /* 点击圆圈跳转功能 */
    for (var i = 0; i < button.length; i++) {
      button[i].onclick=function () {
        var newIndex=parseInt(this.getAttribute("index"));
        if (newIndex!=curIndex) {
          var distance=-800*(newIndex-curIndex);
          slide.style.left=parseInt(slide.style.left)+distance+"px";
          button[curIndex].className="button";
          button[newIndex].className="button on";
          curIndex=newIndex;
        };
      };
    }
    /* 自动播放功能，鼠标移上去停止播放，移开再次播放 */
    var intervalo=setInterval(toggle.rightToggle,3000);
    view.onmouseover=function () {
      clearInterval(intervalo);
    }
    view.onmouseout=function () {
      intervalo=setInterval(toggle.rightToggle,3000);
    }
  </script>
</body>
</html>

五、一些总结

1、本次采用了面向对象和封装的思路，这是因为个人体会到确实面向对象的设计能使代码编写思路更加清晰，还能够免去很多冗余重复的代码，也尝试过其他书写思路，但都会使代码变得不太直观；要注意的一点就是封装后要向外提供接口，且如果是封装在一个函数中，需要实例化一个对象才能调用；

2、在.slide中设置了一个内联样式，这是因为在后面要获取并改变它的left属性，如果不采用内联样式的方法，将无法设置；因为初始时.style.left只能获取内联样式，即使采用内部样式和外部样式也会使得获取的值为undefined。当然，肯定也可以采用其他方法，但是似乎其他方案都更为复杂一些，没找到更简便的方法。

3、在前后各多放置一张图片的作用：
比如，当前是图片1，现在向左切换，可以和其他位置一样先执行统一的左移操作，这时视窗显示额外放置的图片5，再将.slide整体左移使真正的图片5显示在视窗中，这样是先出现了动画效果再“暗中移动”了.slide，就好像没移动一样，真正做到了无缝切换，逻辑也很简单；如果不放置额外的图片，就需要先将视窗左移，使图片5显示在视窗中，这样动画效果难以设置。

4、在获取每个span在它父元素的索引位置时，采用了getAttribute获取自定义的index属性的方法，其他方法肯定也有不少，但是肯定不能在循环中把i的值直接当成span的索引位置。

5、在跳转功能中，如果要跳转的正是当前的页面，应该什么也不做，这样可以优化性能。

6、在点击左右箭头切换时，先判断上一次动画是否完成，没完成就不切换，这样可以优化性能，否则连续点击可能导致卡顿、切换效果不佳。

7、代码似乎还有可以优化的地方；

8、这个只是制作了一个轮播图，接下来考虑做一个轮播组件，似乎难度要大些，还有3D的轮播效果也想要尝试下了。

PS：感兴趣的朋友还可以将上述代码中的图片替换成网络图片，再使用如下在线工具在线测试运行效果：

HTML/CSS/JavaScript代码运行工具
http://tools.jb51.net/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具
http://tools.jb51.net/code/WebCodeRun

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript实现带有子菜单和控件的slider轮播图效果

大家或许做过(照片轮播)无限滚动图片的项目,但是,如果使用普通的滚动,当到达最后一张时,便会滚动回第一张,这是一个非常不好的用户体验.下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果,具体实现代码如下所示: 实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // 4. 鼠标放到ol的li上切换图片 // 5.
无限循环轮播图之运动框架(原生JS实现)

封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function move(obj,json,options){ var options=options || {}; var duration=options.duration || 800; var easing
利用纯js + transition动画实现移动端web轮播图详解

前言在上一篇文章中,我们使用 tween算法实现了 ease-out移动效果, 其实更简洁的方法是使用 css3的 transition动画,下面话不多说了,来一起看看详细的介绍吧. 核心点: 在我们通过代码来移动一段距离的时候, 使用 transion动画;在手指移动的时候,不使用transition动画. 使用 transition实现的动画效果的轮播图js代码不足100行 ~function () { var lastPX = 0; // 上一次触摸的位置x坐标, 需要计算出手指每次移
JS轮播图实现简单代码

本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播
原生JS实现的简单轮播图功能【适合新手】

本文实例讲述了原生JS实现的简单轮播图功能.分享给大家供大家参考,具体如下: 经过几天的努力,终于攻克了这一难题,于是迫不及待的想要分享给大家,编写之前,我也看了不少其他博主的博客,大多是用偏移量写的,对新手来说,还是有些难以理解,虽然可能实现的需求不一样,但我想先从简入手,所以自己查阅资料,修改bug,终于完成.话不多说,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q
JS使用tween.js动画库实现轮播图并且有切换功能

效果图如下所示: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 500px; height: 300px; position: relative; overflow: hidden; } .box{ widt
js实现移动端轮播图效果

本文实例为大家分享了移动端轮播图效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max
js原生实现移动端手指滑动轮播图效果的示例

如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0
使用html+js+css 实现页面轮播图效果(实例讲解)

html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=
js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

原生JS实现的轮播图功能详解

相关推荐

随机推荐