原生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 相关文章推荐
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
Javascript的promise,async和await的区别详解
Mar 24 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
smarty section简介与用法分析
2008/10/03 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
vuejs指令详解
2017/02/07 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
js实现数字滚动特效
2019/12/16 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
详解在Python程序中使用Cookie的教程
2015/04/30 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
.NET初级开发工程师面试题
2014/04/18 面试题
办理护照工作证明
2014/10/10 职场文书
2014年医院工作总结
2014/11/20 职场文书
售房协议书范本
2015/08/11 职场文书
销售会议开幕词
2016/03/04 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技