原生js实现点击轮播切换图片


Posted in Javascript onFebruary 11, 2020

本文实例为大家分享了js实现点击轮播切换图片的具体代码,供大家参考,具体内容如下

原生js实现点击轮播切换图片

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击轮播图</title>
</head>
<style>
    .container {
      position: relative;
      width: 600px;
      height: 400px;
      margin:100px auto 0 auto;
      box-shadow: 0 0 5px green;
      overflow: hidden;
    } 
    .wrap {
      position: absolute;
      width: 4200px;
      height: 400px;
      z-index: 1;
    }
    .container .wrap img {
      float: left;
      width: 600px;
      height: 400px;
    }
     .container .buttons {
      position: absolute;
      right: 40%;
      bottom:20px;     
      z-index: 2;
    }  
    .container .buttons span {
      margin-left: 10px;
      display: inline-block;
      width: 7px;
      height: 7px;     
      background-color: #D4D4D4;
      text-align: center;
      color:white;
      cursor: pointer;      
    }
    .container .buttons span.on{
      background-color: #558949;
    }
    .container .arrow {
      position: absolute;
      top: 35%;
      color: green;
      padding:0px 14px;
      border-radius: 50%;
      font-size: 50px;
      z-index: 2;
      display: none;
    }
</style>
<body>
  <div class="container">
    <div class="wrap" style="left:-600px;">
      <img alt="">
      <img src="./img/jd_app3.png" alt="">
      <img src="./img/jd_app4.png" alt="">
      <img src="./img/jd_app5.png" alt="">
      <img src="./img/jd_app6.png" alt="">
      <img src="./img/jd_app7.png" alt="">    
    </div>
    <div class="buttons">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>  
  </div>
  
  <script>
   var wrap = document.querySelector(".wrap");     
    var index = 0;
    var dots = document.getElementsByTagName("span");
    function showCurrentDot () {
      for(var i = 0, len = dots.length; i < len; i++){
        dots[i].className = "";
      }
      dots[index].className = "on";
    }
    index++;
      if(index > 4){
        index = 0;
      }
    index--;
    if(index < 0){
      index = 4;
    }
    showCurrentDot();
     for (var i = 0, len = dots.length; i < len; i++){
      (function(i){
        dots[i].onclick = function () {
          var dis = index - i;
          if(index == 4 && parseInt(wrap.style.left)!==-3000){
            dis = dis - 5;   
          }
          //和使用prev和next相同,在最开始的照片5和最终的照片1在使用时会出现问题,导致符号和位数的出错,做相应地处理即可
          if(index == 0 && parseInt(wrap.style.left)!== -600){
            dis = 5 + dis;
          }
          wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";
          index = i;
          showCurrentDot();
        }
      })(i);      
    }
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
js实现倒计时关键代码
May 05 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 #Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 #Javascript
JS+DIV实现拖动效果
Feb 11 #Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 #Javascript
原生js拖拽实现图形伸缩效果
Feb 10 #Javascript
js实现单元格拖拽效果
Feb 10 #Javascript
详解Vue template 如何支持多个根结点
Feb 10 #Javascript
You might like
php array的学习笔记
2012/05/10 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
php cli配置文件问题分析
2015/10/15 PHP
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python编写俄罗斯方块
2020/03/13 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
24岁生日感言
2014/01/13 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
音乐学专业求职信
2014/07/22 职场文书
会员卡清退活动总结
2014/08/27 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
学术会议开幕词
2016/03/03 职场文书
如何写好开幕词?
2019/06/24 职场文书
python 镜像环境搭建总结
2022/09/23 Python