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 相关文章推荐
详解jquery uploadify 上传文件
Nov 09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 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 If Else(elsefi) 语句
2013/04/07 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php设计模式之单例模式代码
2016/06/11 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
python实现图像识别功能
2018/01/29 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
pandas分组聚合详解
2020/04/10 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
python中return不返回值的问题解析
2020/07/22 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
学生实习推荐信范文
2013/11/26 职场文书
触摸春天教学反思
2014/02/03 职场文书
中国好声音华少广告词
2014/03/17 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
python实现的web监控系统
2021/04/27 Python
Java界面编程实现界面跳转
2022/06/16 Java/Android