JS轮播图的实现方法


Posted in Javascript onAugust 24, 2020

本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下

需求:

自动轮播,鼠标移入轮播停止、移出继续,小圆点点击切图,左右箭头切图

效果图:

JS轮播图的实现方法

思路

通过编写过渡动画实现轮播效果,图片的出现动画以及移出动画。显示区的图片移出,切换的图进入分别调用动画,程序关键点:哪张图应该进入,哪张图应该移出。

轮播分为三部分:

自动轮播,左右箭头翻图,底部小圆点点击翻图。

编写程序顺序:

1. 小圆点点击

为什么先做小圆点呢?做小圆点点击功能时,我们能够清晰的知道哪张图片应该切换过来,哪张图片应该移开。例如,显示区是第一张图时,点击第二个原点,那么当前的第一张图应该移开,第二图应该进入。

2.左右箭头切换

这部分功能,我们可以这种思路,当点击左箭头时,相当于我们按顺序点击1、2、3号小圆点,只是显示区为3号图时,我们需要将下一张设置为1号图。所以加一个判断条件即可,当计数器为3时,重置为1;右边箭头相反即可 顺序变为3、2、1,当当计数器为1时,重置为3。 

3.自动轮播

这功能就相当于在一定的时间间隔内,点击右边箭头或者左边箭头。

HTML部分:

<div id="banner">
 <div class="w">
  <!--   左右箭头-->
  <span class="iconfont icon-zuojiantou" onclick="arrow_left()"></span>
  <span class="iconfont icon-youjiantou" onclick="arrow_right()"></span>
  <!--   轮播图-->
  <ul>
   <li><img src="img/1.jpg" alt=""></li>
   <li style="left: 1000px"><img src="img/2.jpg" alt="" ></li>
   <li style="left: 1000px"><img src="img/3.jpg" alt="" ></li>
  </ul>
  <!--  /小圆点-->
  <ol id="circleContainer">
   <li onclick="move(0)"></li>
   <li onclick="move(1)"></li>
   <li onclick="move(2)"></li>
  </ol>
 </div>
</div>

CSS部分:

<style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
  .w {
   width: 1000px;
   height: 600px;
   margin: 100px auto 0;
   position: relative;
   overflow: hidden;
  }
  ul {
   height: 600px;
  }
  @keyframes leftCome {
   from {
    left: -100%;
   }
   to {
    left: 0;
   }
  }
  @keyframes leftOut {
   from {
    left: 0;
   }
   to {
    left: 100%;
   }
  }
  @keyframes rightCome {
   from {
    left: 100%;
   }
   to {
    left: 0;
   }
  }
  @keyframes rightOut {
   from {
    left: 0;
   }
   to {
    left: -100%;
   }
  }
  ul li {
   position: absolute;
   width: 1000px;
  }
  ul li img {
   width: 100%;
   height: 600px;
  }
  .iconfont {
   color: white;
   position: absolute;
   font-size: 30px;
   top: calc(50% - 15px);
   background-color: rgba(216, 216, 216, 0.23);
   cursor: pointer;
   opacity: 0;
   transition: opacity .3s linear;
   z-index: 999;
  }
  .iconfont:hover {
   color: palegreen;
  }
  .icon-zuojiantou {
   left: 0;
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
  }
  .icon-youjiantou {
   right: 0;
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
  }
  #circleContainer {
   position: absolute;
   bottom: 10px;
   left: calc(50% - 30px);
  }
  #circleContainer li {
   display: inline-block;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: white;
   margin-right: 5px;
  }
  #circleContainer .change {
   background-color: palegreen;
   box-shadow: 0 0 10px #7dd07d;
  }
</style>

JS部分:

<script>
  let timer ;
  window.onload = function(){
   timer = setInterval(function () {
    arrow_left();
   },3000)
  };
  let arrow = document.querySelectorAll(".iconfont");
  let w = document.querySelector(".w");
  let circle = document.querySelectorAll("ol li");
  w.addEventListener("mouseenter",function () {
   clearInterval(timer);
   arrow[0].style.opacity = "1";
   arrow[1].style.opacity = "1";
  });
  w.addEventListener("mouseleave",function () {
   arrow[0].style.opacity = "0";
   arrow[1].style.opacity = "0";
   timer = setInterval(function () {
    arrow_left();
   },3000)
  });
  circle[0].className = "change";
  let location_i = 0;
  let li = document.querySelectorAll("ul li");
  // 移动函数
  function move(i,direcTion_) {
    if (direcTion_ === "right") {
     if (location_i !== i) {
      li[i].style.animation = "rightCome .5s ease forwards";
      li[location_i].style.animation = "rightOut .5s ease forwards";
      location_i = i;
      num = i;
     }
    } else {
     if (location_i !== i) {
      li[i].style.animation = "leftCome .5s ease forwards";
      li[location_i].style.animation = "leftOut .5s ease forwards";
      location_i = i;
      num = i;
     }
    }
    for (let i = 0 ; i<circle.length ;i++){
     circle[i].className = "";
    }
    circle[location_i].className = "change";
  }
  // 右箭头
  let flag = true;
  let num = 0;
  function arrow_right() {
   flag = false ;
   num === 2 ? num = 0 : num = location_i + 1;
   move(num);
  }
  // 左箭头
  function arrow_left() {
   num === 0 ? num = 2 : num = location_i - 1;
   move(num,"right");
  }
</script>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
layui的layedit富文本赋值方法
Sep 18 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
js 函数性能比较方法
Aug 24 #Javascript
JavaScript实现简单验证码
Aug 24 #Javascript
JavaScript经典案例之简易计算器
Aug 24 #Javascript
原生js实现拖拽移动与缩放效果
Aug 24 #Javascript
JavaScript实现拖拽和缩放效果
Aug 24 #Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
JavaScript实现矩形块大小任意缩放
Aug 25 #Javascript
You might like
PHP入门速成(2)
2006/10/09 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
js控制框架刷新
2008/08/01 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
React diff算法的实现示例
2018/04/20 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
Python实现求两个csv文件交集的方法
2017/09/06 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
2014年国培研修感言
2014/03/09 职场文书
初中生操行评语大全
2014/04/24 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
个人承诺书格式
2014/06/03 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
检讨书模板大全
2015/05/07 职场文书
红色经典观后感
2015/06/18 职场文书