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脚本语言在网页中的简单应用
May 13 Javascript
javascript 文档的编码问题解决
Mar 01 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
微信小程序实现刷脸登录
May 25 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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
我的论坛源代码(一)
2006/10/09 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
python删除文件示例分享
2014/01/28 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python根据时间获取周数代码实例
2019/09/30 Python
python ubplot使用方法解析
2020/01/10 Python
如何在django中添加日志功能
2020/02/06 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
在职证明书范本(2014新版)
2014/09/25 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
捐助倡议书
2015/01/19 职场文书