微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

如何用javascript实现如下效果_html/css_WEB-ITnose

php中文网
发布： 2016-06-21 09:24:40
原创
980人浏览过

详细：点击向前按钮进行向前翻页，向后按钮进行向后翻页，点击中间蓝色小圆圈可以来回自由切换

BRANDMARK
BRANDMARK

AI帮你设计Logo、图标、名片、模板……等

BRANDMARK 180
查看详情 BRANDMARK

回复讨论(解决方案)

这个类似于网站的焦点图,网上有很多例子你可以去下一个自己改一下。

先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件，转到下一个时  显示影藏的div,再把原来的div给隐藏掉

先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件，转到下一个时  显示影藏的div,再把原来的div给隐藏掉


可以用代码写个简单的例子伐？！

    function a() {
        document.getElementById("div1").style.display = "block";
        document.getElementById("div2").style.display = "none";
    }
    function b() {
        document.getElementById("div1").style.display = "none";
        document.getElementById("div2").style.display = "block";
     }


纯手打 。。。。。。。。。。


先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件，转到下一个时  显示影藏的div,再把原来的div给隐藏掉


可以用代码写个简单的例子伐？！ 效果如图，



先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件，转到下一个时  显示影藏的div,再把原来的div给隐藏掉


可以用代码写个简单的例子伐？！ 效果如图， 如果LZ需要源代码，可以去网盘的博客留言： http://www.ido321.com/message
相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：img 的 src 要怎么写_html/css_WEB-ITnose 下一篇：IE无法加载到外部CSS样式, 用360浏览器就可以,上CSS引用代码[急]_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
CSS 锥形渐变无限旋转动画实现指南 本文详细介绍了如何利用CSS的conic-gradient和@keyframes动画实现一个无限旋转的锥形渐变效果。核心在于巧妙地配置渐变颜色（至少三色，首尾颜色相同）和使用CSS伪元素配合transform:rotate动画，以创建平滑且循环的视觉动态，并提供了完整的代码示例和关键点解析。
2025-11-30 12:06:29
270
JavaScript多视频播放列表与模态框管理教程 本教程详细介绍了如何利用JavaScript、HTML5的元素以及动态内容加载技术，构建一个可复用且高效的多视频播放列表与模态框系统。通过动态更新视频源和海报图，结合播放控制和模态框管理，实现对大量视频的集中管理和流畅播放，避免了为每个视频创建独立模态框的冗余，优化了用户体验和代码可维护性。
2025-11-30 12:06:01
496
Rails应用中Turbo脚本警告与ActionText内容渲染异常定位与解决 本文旨在解决Rails应用中因ActionText内容误用于meta标签导致页面内容渲染异常及Turbo脚本警告的问题。核心在于理解ActionText富文本内容与HTMLmeta标签语义的冲突，并提供正确的SEO关键词处理方案，以确保页面结构完整性和前端框架的正常运行。
2025-11-30 12:05:01
829
掌握CSS resize属性实现元素可伸缩布局 本文旨在解决前端开发中元素尺寸调整的常见挑战，特别是DOMRect与CSS定位属性之间的差异。通过深入探讨CSS的resize属性，本文将展示如何不依赖复杂的JavaScript计算，即可轻松实现用户可伸缩的UI元素，并详细介绍其用法、优点及注意事项，为开发者提供一种高效、高性能的解决方案。
2025-11-30 12:00:21
608
基于data-group属性实现带标题的表格数据过滤 本教程详细介绍了如何使用jQuery和HTML的data-group属性，实现对包含多个thead部分的复杂表格进行高效的数据过滤。通过将thead和其对应的tbody逻辑分组，我们能够确保在搜索时，不仅显示匹配的行，还能同时显示其所属的标题部分，从而提升用户体验和数据可读性。
2025-11-30 12:00:08
316
掌握CSS打印样式：利用@page与@media print优化页面边距控制 本文深入探讨如何利用CSS的@page规则和@mediaprint媒体查询来精确控制网页打印时的边距。我们将分析@page在设置默认页面边距方面的作用，并阐述如何通过@mediaprint来进一步优化内容布局，以应对浏览器打印设置中的“最小”或“用户自定义”边距场景，从而实现专业的打印输出效果。
2025-11-30 11:54:38
985
CSS教程：实现侧边栏导航项全宽圆角悬停效果 本教程详细介绍了如何在侧边栏导航中为列表项实现全宽、圆角、蓝色背景的悬停效果。通过调整CSS选择器，将悬停样式正确应用于父级元素及其子级标签，并辅以边框圆角和文本颜色变化，确保用户交互时呈现出预期的视觉反馈，同时提供布局优化技巧。
2025-11-30 11:52:17
943
W3C HTML验证器中Unicode字符路径解析的深度解析与修复 本文深入探讨了W3CHTML验证器在处理包含特定Unicode字符（如?）的URL路径时曾出现的验证错误。该问题源于验证器内部URL解析逻辑对UTF-16补充字符处理不当，未能正确计算字符索引。文章详细解释了Java中UTF-16编码与代理对的概念，以及修复方案如何通过引入Character.charCount()智能处理字符长度，确保了URL路径的准确解析和验证的正确性。
2025-11-30 11:49:02
241
使用Python Selenium定位并提取页面特定文本信息 本文详细介绍了如何利用PythonSelenium库，通过XPath定位包含特定关键词的页面元素，并精确提取该关键词之后所需的文本内容。通过实例代码演示了如何结合find_element、text属性和Python字符串的split()方法，高效地从复杂的页面结构中抽取目标数据，确保自动化测试或数据抓取任务的准确性与效率。
2025-11-30 11:47:52
680
解决CSS Grid布局中子容器高度不生效及1fr单位失效问题 本教程深入探讨CSSGrid布局中一个常见问题：当子级Grid容器未明确继承父级高度时，其内部的1fr行无法按预期填充剩余空间。文章通过具体案例分析，阐释了height:100%在解决此类高度继承问题中的关键作用，确保Grid子容器能正确响应父容器尺寸，从而使1fr单位正常工作，实现灵活且可预测的布局。
2025-11-30 11:46:26
398
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部