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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
浅析javascript的return语句
Dec 15 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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下目前为目最全的CURL中文说明
2010/08/01 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
python利用datetime模块计算时间差
2015/08/04 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
手把手教你python实现SVM算法
2017/12/27 Python
python实现简单登陆系统
2018/10/18 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
python字符串的index和find的区别详解
2020/06/20 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
给酒店员工的表扬信
2014/01/11 职场文书
办公室副主任职责范本
2014/03/08 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
股东大会通知
2015/04/24 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
遗嘱格式范本
2015/08/07 职场文书
法院执行局工作总结
2015/08/11 职场文书
社区服务理念口号
2015/12/25 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python