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 相关文章推荐
提示$ is not defined错误分析及解决
Apr 09 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 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
重置版战役片段
2020/04/09 魔兽争霸
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
Python入门篇之正则表达式
2014/10/20 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Python中过滤字符串列表的方法
2020/12/22 Python
普罗米修斯教学反思
2014/02/06 职场文书
八项规定整改方案
2014/02/21 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
给老婆的保证书范文
2014/04/28 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
教师节倡议书2015
2015/04/27 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
APP界面设计技巧和注意事项
2022/04/29 杂记
Python如何将list中的string转换为int
2022/07/15 Ruby
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL