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 contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
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正则校验用户名介绍
2008/07/19 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
js实现简单模态框实例
2018/11/16 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python中扩展包的安装方法详解
2017/06/14 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
介绍一下SQL Server的全文索引
2013/08/15 面试题
医学专业职业生涯规划范文
2014/02/05 职场文书
超越自我演讲稿
2014/05/21 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
关于迟到的检讨书
2015/05/06 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
创业计划书之干洗店
2019/09/10 职场文书
Python+Appium新手教程
2021/04/17 Python
基于Python实现西西成语接龙小助手
2022/08/05 Golang