`

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

阅读更多
以下为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' onclick="getUp()" value="上一个"> <input type='button' onclick="getDown()" value="下一个">
以下效果图:

  • 大小: 14.7 KB
0
0
分享到:
评论
2 楼 卢水发 2012-09-24  
可以的,我都放在我们网站运行了
1 楼 S1267_hanshasha 2012-09-12  
这个方法不可以实现唉

相关推荐

    ajax控制div窗口显示和隐藏

    要使用Ajax来控制div的显示,首先需要在JavaScript中创建一个Ajax请求。在接收到服务器响应后,根据返回的数据决定是否显示或隐藏特定的div。例如,服务器可能返回一个JSON对象,其中包含一个布尔值,表示是否显示...

    JS实现各种动态显示隐藏div效果

    在JavaScript(JS)中,动态显示和隐藏div元素是网页交互设计中常用的技术,它可以提升用户体验,让网页更具活力。本文将深入探讨如何利用JS来实现卷动显示隐藏、渐变显示隐藏以及大小缩放显示隐藏的效果。 1. **...

    DIV滚动悬浮层(滚动条动,层不动)

    在网页设计中,"DIV滚动悬浮层"是一种常见的交互效果,它使得某个元素(通常是一个包含重要信息或功能的div)在用户滚动页面时始终保持在屏幕的特定位置,提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...

    jQuery实现将div的滚动条滚动到指定位置

    当用户点击`#scrollTo`按钮时,会触发一个JavaScript函数,该函数计算当前滚动位置并加上目标偏移量,然后使用`animate()`方法在1秒内平滑地滚动到新位置。 需要注意的是,`scrollTop()`方法用于获取或设置元素的...

    DIV动态显示滚动条

    一个包含滚动条的`DIV`可能如下所示: ```html &lt;div id="scrollDiv" style="overflow:auto; width:300px; height:200px;"&gt; 这里是一些很长的内容... &lt;/div&gt; ``` 在这个例子中,`overflow:auto` 属性使得当内容超出...

    div滚动条优化

    总的来说,"div滚动条优化"是一个关于提升网页用户体验和视觉一致性的重要话题。通过CSS和JavaScript,我们可以创建出既美观又实用的滚动条,同时要注意跨浏览器兼容性和性能优化,确保在不影响功能的前提下,提供...

    Android手机版浏览器DIV滚动条失效解决方案

    在Android平台上,开发一款手机版浏览器时,可能会遇到一个常见的问题:在特定情况下,网页中的`div`元素的滚动条无法正常工作。这个问题通常是由于Android原生浏览器或自定义WebView组件的某些特性引起的。本文将...

    Div块上下左右循环滚动

    总的来说,“Div块上下左右循环滚动”是一个结合了HTML、CSS和JavaScript的网页动态效果,通过类设计和JavaScript动画,可以实现多个独立且互不干扰的Div滚动效果。这样的效果在新闻资讯、产品展示等场景下非常常见...

    js+div实现文字滚动和图片切换效果代码.docx

    `&lt;div id="indemo"&gt;`中的四个Div元素分别代表四张图片,通过JavaScript的lunTab函数控制显示。 3. **CSS样式**: - CSS用于定义元素的外观和布局,例如设置边框、背景色、字体大小等。 - 在这个例子中,CSS用于...

    jQuery+mousescroll.js自定义美化div滚动条插件

    "jQuery+mousescroll.js自定义美化div滚动条插件"就是这样一个工具,它旨在将传统的浏览器滚动条转变为更加符合现代审美且交互友好的元素。这款插件允许开发者轻松地自定义滚动条样式,使其与网站的设计风格保持一致...

    DIV向上滚动新闻,简洁JavaScript示例,高浏览器兼容性

    这个文件很可能包含了用于创建滚动效果的JavaScript代码,以及一个或多个DIV元素,它们的CSS样式可能会被设置为隐藏,然后通过JavaScript控制其显示和移动,从而实现滚动效果。 为了实现这个效果,JavaScript代码...

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.docx

    ### DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏 #### 概述 在Web开发过程中,滚动条的样式和行为对于提升用户体验至关重要。通过CSS(层叠样式表),开发者可以自定义滚动条的外观、行为以及是否显示或隐藏。本...

    javascript+div图片无缝滚动

    - **核心思想**:利用JavaScript定时器(`setInterval`)不断调整容器元素的`scrollTop`属性值来模拟滚动效果,并且当滚动到顶部或底部时瞬间跳转到另一个位置,形成无缝循环。 ##### 2. 关键代码解析 - **变量定义...

    DIV无缝滚动

    这种效果通常结合HTML的`&lt;div&gt;`元素、JavaScript(JS)和jQuery库来实现,使得信息或者图片能够像一个无限循环的列表一样自动、连续地滚动,给用户带来更流畅的浏览体验。 1. **HTML `&lt;div&gt;`元素**:`&lt;div&gt;`是HTML...

    鼠标滚动div内容

    设置`overflow: auto`或`overflow: scroll`将使div显示滚动条,让用户能够查看隐藏的内容。 2. **JavaScript事件监听** JavaScript提供了事件监听功能,例如`addEventListener`,用于在用户滚动鼠标时触发相应的...

    JS+DIV无缝滚动代码

    根据给定的文件信息,我们可以总结出以下关于“JS+DIV无缝滚动代码”的知识点: ### 一、基础知识 #### 1.1 DIV容器与CSS样式 - **`&lt;div&gt;`**:HTML文档中最常见的标签之一,用于组合其他HTML元素,没有特定的格式...

    滚动至DIV后,动画显示

    "滚动至DIV"技术则是在用户滚动到特定的DIV时触发特定事件,例如显示或隐藏某些元素,或者执行动画效果。 在这个场景中,插件的描述表明它会在页面滚动到某个特定的DIV时,使该DIV执行动画显示。这可能是通过监听...

    滚动条到底部弹出div

    为了实现这个效果,我们首先需要一个固定在底部或者隐藏的`div`,然后通过JavaScript监听滚动事件。 在JavaScript中,我们可以使用`window.onscroll`事件来监听滚动条的变化。当滚动条达到底部时,我们可以检查`...

    DIV+CSS+JAVASCRIPT实现图片滚动效果

    例如,我们可以创建一个Div,设定其宽度为显示一张图片的大小,高度根据需要调整,然后通过CSS的overflow属性隐藏超出部分,为滚动效果做准备。 接着,CSS(Cascading Style Sheets)负责美化这些Div元素。在图片...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    例如,如果你想让一个div元素在内容超出时显示滚动条,可以这样设置: ```css div { width: 200px; height: 200px; overflow: auto; } ``` 接下来,我们讨论如何隐藏滚动条。如果希望在某些情况下隐藏滚动条,...

Global site tag (gtag.js) - Google Analytics