原生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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
JavaScript的Cookies
Jan 16 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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 Smarty生成EXCEL文档的代码
2008/08/23 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
PHP生成器简单实例
2015/05/13 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
linux下python抓屏实现方法
2015/05/22 Python
python匿名函数的使用方法解析
2019/10/10 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
统计每一学生的平均成绩
2014/06/06 面试题
"引用"与指针的区别是什么
2016/09/07 面试题
大学生年度自我鉴定
2013/10/31 职场文书
医学院毕业生自荐信
2013/11/08 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
房屋租房协议书范本
2014/12/04 职场文书
2019消防宣传标语!
2019/07/10 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
Python函数中的不定长参数相关知识总结
2021/06/24 Python
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL