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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
捕获关闭窗口的脚本
Jan 10 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
Javascript实现计算个人所得税
May 10 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 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 命令行参数详解及应用
2011/05/18 PHP
PHP 透明水印生成代码
2012/08/27 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
Javascript面向对象之四 继承
2011/02/08 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
Python 解析XML文件
2009/04/15 Python
Python-基础-入门 简介
2014/08/09 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python else语句在循环中的运用详解
2020/07/06 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
adidas美国官网:adidas US
2016/09/21 全球购物
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
护士节策划方案
2014/05/19 职场文书
总经理司机岗位职责
2015/04/10 职场文书
值班管理制度范本
2015/08/06 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android