原生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 相关文章推荐
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 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 zend 相对路径问题
2009/01/12 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python多重继承实例
2014/10/11 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python匿名函数及应用示例
2019/04/09 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
中专毕业生自我鉴定
2013/11/21 职场文书
小学运动会报道稿
2014/10/04 职场文书
关于幸福的感言
2015/08/03 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书