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 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
JavaScript 基础问答三
Dec 03 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
小程序自定义模板实现吸顶功能
Jan 08 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
一个图形显示IP的PHP程序代码
2007/10/19 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
再论Javascript的类继承
2011/03/05 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
利用python批量检查网站的可用性
2016/09/09 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
详解Django中间件执行顺序
2018/07/16 Python
django框架ModelForm组件用法详解
2019/12/11 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
高三英语教学反思
2014/01/13 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
工作经验交流材料
2014/12/30 职场文书
人民检察院起诉书
2015/05/20 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
正则表达式基础与常用验证表达式
2022/06/16 Javascript