JS实现轮播图效果


Posted in Javascript onJanuary 11, 2020

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

原理介绍

1.html 

<div id="swiper-container" class="swiper-container" onmouseenter="swiperImg()" onmouseleave="stopSwiper()">
  <div id="img-list" style="left:0px;">
   <img src="img/swiper1.png" alt="1">
   <img src="img/swiper2.png" alt="2">
   <img src="img/swiper1.png" alt="1">
   <img src="img/swiper2.png" alt="2">
  </div>
  <div id="swiper-btn">
   <span index="1" class="on"></span>
   <span index="2"></span>
  </div>
</div>

布局很简单,利用一个class="swiper-container"的div,包裹图片列表,swiper-btn是按钮

2. css

* {
  margin: 0;
  padding: 0;
 }

 a {
  text-decoration: none;
 }

 .swiper-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid;
  overflow: hidden;
 }

 #img-list {
  position: absolute;
  width: 1200px;
  height: 300px;
 }

 #img-list img {
  float: left;
 }

 #swiper-btn {
  position: absolute;
  bottom: 5%;
  left: 45%;
 }

 #swiper-btn span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;

 }

 .on {
  background-color: goldenrod;
 }

 span {
  background-color: #d7d7d7;
 }

3.js

var timer;
  var div = document.getElementById('img-list');
  var span = document.getElementById('swiper-btn').getElementsByTagName('span');
  var offset = -300;
  var index = 1;
  function swiperImg() {
   timer = setInterval(() => {
    var left = parseInt(div.style.left);
    var newLeft = left + offset;
    if (newLeft <= -1200) {
     div.style.left = '0px';
    }
    else {
     div.style.left = newLeft + 'px';
    }
    showBtn(parseInt(div.style.left));
   }, 3000);
  }

  function showBtn(left) {
   if (left == 0 || left == -600) {
    span[0].className = "on";
    span[1].className = "";
   }
   else {
    span[0].className = "";
    span[1].className = "on";
   }
  }

  function stopSwiper() {
   clearInterval(timer);
  }

  for (var i = 0; i < span.length; i++) {
   span[i].onclick = function () {
    if (this.className == "on") {
     return false;
    }
    var myIndex = parseInt(this.getAttribute("index"));
    if (myIndex == 1)
     div.style.left = 0 + 'px';
    if (myIndex == 2)
     div.style.left = -300 + 'px';
    index = myIndex;
    showButton();
   }
  }

  function showButton() {
   for (var i = 0; i < span.length; i++) { //全部取消掉on样式
    if (span[i].className == "on") {
     span[i].className = "";
     break;
    }
   }
   span[index - 1].className = "on";
  }

效果如下所示:

JS实现轮播图效果

JS实现轮播图效果

更多关于轮播图效果的专题,请点击下方链接查看学习

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

Javascript 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
js实现带搜索功能的下拉框
Jan 11 #Javascript
js实现select下拉框选择
Jan 11 #Javascript
js实现二级联动简单实例
Jan 11 #Javascript
jQuery实现轮播图效果demo
Jan 11 #jQuery
详解微信小程序中var、let、const用法与区别
Jan 11 #Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 #jQuery
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 #Javascript
You might like
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
学习python的几条建议分享
2013/02/10 Python
PyQt5实现简易计算器
2020/05/30 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
快速查找Python安装路径方法
2020/02/06 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
财务会计毕业生个人求职信
2014/02/03 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
小学语文教学随笔
2015/08/14 职场文书
实验心得体会范文
2016/01/25 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript