原生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 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
js实现分页功能
May 24 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 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
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
javascript event 事件解析
2011/01/31 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
用director.js实现前端路由使用实例
2017/01/27 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python 监测文件是否更新的方法
2019/06/10 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
简单的项目建议书模板
2014/03/12 职场文书
技校毕业生自荐书
2014/05/23 职场文书
2014会计年终工作总结
2014/12/20 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript