当前位置: 首页 > news >正文

js控制点击让div滚动,显示一个,隐藏一个

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

以下为js代码:
<script type="text/javascript">
     function getDown(){
    var gundong = document.getElementsByClassName("gundong");
var L = gundong.length;
var show = 1;
for(var i=0;i<L;i++){
if(gundong[i].style.display=='block'){
    show=i;
break;
}
}
if(show+4<L){
   gundong[show].style.display='none';
   gundong[show+4].style.display='block';
}

}

function getUp(){
    var gundong = document.getElementsByClassName("gundong");
var L = gundong.length;
var show = 1;
for(var i=0;i<L;i++){
if(gundong[i].style.display=='block'){
    show=i;
break;
}
}
if(show-1>=0&&show+4<=L){
   gundong[show-1].style.display='block';
   gundong[show+3].style.display='none';
}

}
  </script>

以下为html代码:
<div id="main">
    <div class="gundong" id="liudong" style="display:block">1</div>
<div class="gundong" id="liudong" style="display:block">2</div>
<div class="gundong" id="liudong" style="display:block">3</div>
<div class="gundong" id="liudong" style="display:block">4</div>
<div class="gundong" id="liudong" style="display:none">5</div>
<div class="gundong" id="liudong" style="display:none">6</div>
<div class="gundong" id="liudong" style="display:none">7</div>
</div>
<input type='button' οnclick="getUp()" value="上一个"> <input type='button' οnclick="getDown()" value="下一个">
以下效果图:
30143332_qER5.jpg

转载于:https://my.oschina.net/lushuifa/blog/1545956

相关文章:

  • 为什么企业迁移到云?81%的企业只是害怕“错过”
  • 6个月融资超50亿元,云计算创业团队正做得风生水起?
  • 「win」玩转快捷键热词速写
  • 别只盯着SD-WAN了,关注一下IPv6吧
  • Azure PowerShell (2) 修改Azure订阅名称
  • 为什么说中头彩了?这个行业居然也要上云?
  • 工程添加EF框架的方法
  • 逻辑运算的优先级
  • 【机器学习实战】第6章 支持向量机(Support Vector Machine / SVM)
  • 无线网络覆盖的两种方式:天馈式与吸顶式
  • 自定义控件的最基本了解和应用
  • 主从复制原理以及实践
  • 网站301跳转到新域名
  • 词向量模型
  • DockOne微信分享(八十五):Docker存储方式选型建议
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • 【407天】跃迁之路——程序员高效学习方法论探索系列(实验阶段164-2018.03.19)...
  • Create React App 使用
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • Java比较器对数组,集合排序
  • Linux快速复制或删除大量小文件
  • linux学习笔记
  • Netty 4.1 源代码学习:线程模型
  • Vue2.0 实现互斥
  • 对超线程几个不同角度的解释
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 前端_面试
  • 算法之不定期更新(一)(2018-04-12)
  • 移动端 h5开发相关内容总结(三)
  • 移动互联网+智能运营体系搭建=你家有金矿啊!
  • PostgreSQL之连接数修改
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • 积累各种好的链接
  • ​软考-高级-信息系统项目管理师教程 第四版【第14章-项目沟通管理-思维导图】​
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • # Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
  • # 执行时间 统计mysql_一文说尽 MySQL 优化原理
  • #!/usr/bin/python与#!/usr/bin/env python的区别
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • $(function(){})与(function($){....})(jQuery)的区别
  • (27)4.8 习题课
  • (附源码)springboot掌上博客系统 毕业设计063131
  • (蓝桥杯每日一题)love
  • (四)Linux Shell编程——输入输出重定向
  • (转)c++ std::pair 与 std::make
  • .NET Compact Framework 3.5 支持 WCF 的子集
  • .net 调用php,php 调用.net com组件 --
  • .Net程序帮助文档制作
  • .NET处理HTTP请求
  • .NET单元测试
  • @FeignClient注解,fallback和fallbackFactory
  • @Mapper作用
  • [2]十道算法题【Java实现】
  • [android] 请求码和结果码的作用
  • [android]-如何在向服务器发送request时附加已保存的cookie数据