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

请教页面设计的初级问题_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:06:56
原创
1160人浏览过

不知道这个帖子是否应该发在这里，上次发过一次，没人理:(

想请教页面设计的高手两个问题：

1怎么把幻灯片放在在背景上，具体说就是一些照片按一定时间顺序在背景展示，前景是标题或者其它

2怎么放滚动新闻条，就是一条新闻慢慢从左到右，然后再重复

是不是这些功能必须在付费软件中才能有，我现在有Microsoft expression web 4  和 免费的Komposer可以用

先谢谢大家了

美图设计室
美图设计室

5分钟在线高效完成平面设计，AI帮你做设计

美图设计室 29
查看详情 美图设计室

回复讨论(解决方案)

这两个功能都可以通过JS实现。
第一个效果，通过定时更换背景图片的方式来实现 

// 假设有个<div id="changebg"></div>var imgs = new Array();var index = 0;function InitBgImgs() {    // 设定背景图片集}function ChangeBg() {    $("#changebg").css({ "background-image": "url(" + imgs[index] + ")" });    if (++index > imgs.length) { index = 0; }    setTimeout("ChangeBg()", 1000); // 每秒更换背景一次}
登录后复制


第二种则是在页面上放置浮动DIV，然后从左至右或者从右至左移动显示，实现的方式和上面的类似，只是控制的STYLE不一样。从左至右控制LEFT，从右至左控制RIGHT

楼主可以google一下  JS幻灯片 插件

用js实现图片轮播
函数为setTimeout

多谢大家的帮助，对不起回复晚了

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

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

下载
来源：php中文网
收藏 点赞
上一篇：如何将网页中指定的字符串标红？_html/css_WEB-ITnose 下一篇：菜鸟自学建站 HTML 第四课 设置文档格式（1）_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript：使用Set高效生成不重复随机数的教程 在JavaScript中生成指定范围内不重复的随机数是常见的开发需求，但传统的随机数生成方法容易导致重复。本文将深入探讨如何利用ES6的Set数据结构，高效且简洁地实现这一功能。通过结合Set自动维护元素唯一性的特性，我们可以轻松解决随机数重复问题，并提供完整的代码示例及重要注意事项，确保生成的随机数列表始终包含唯一的数字。
2025-11-11 11:56:42
227
JavaScript评论轮播图图片更新失效：变量作用域与命名冲突解析 本文详细解析了JavaScript评论轮播图中图片元素无法随内容更新的常见问题。核心原因在于函数参数与全局变量命名冲突导致的变量遮蔽。教程将通过代码示例，演示如何正确重命名函数参数以解决此问题，确保图片与评论数据同步显示，并强调了编写清晰、无歧义代码的重要性，以提升前端开发的健壮性。
2025-11-11 11:56:18
296
自定义HTML拖放操作中的鼠标指针样式：实现“抓取”效果 本文详细介绍了如何在HTML拖放操作中，通过结合JavaScript的dragstart和dragend事件与CSS类，动态地将鼠标指针更改为“grab”样式。这种方法有效解决了默认禁止光标的问题，提升了用户交互体验，并提供了具体的代码示例和实现步骤，确保拖放过程中的光标反馈直观且符合预期。
2025-11-11 11:56:01
436
使用JavaScript和HTML5实现Div内容的文件保存与加载 本教程详细介绍了如何利用HTML5FileAPI和JavaScript（结合jQuery）在客户端实现Div内容的保存与加载功能。通过创建可下载文件和读取本地文件，用户可以直接在浏览器中管理Div中的HTML或文本内容，无需服务器端交互，提供了一种轻量级的解决方案。
2025-11-11 11:52:01
751
利用HTML5 File API实现网页内容（Div）的客户端保存与加载 本文详细介绍了如何利用HTML5的FileAPI在客户端实现将网页中特定div元素的内容保存为本地文件，以及从本地文件加载内容并更新div元素。教程涵盖了核心JavaScript代码、HTML结构，并提供了完整的示例，旨在帮助开发者理解和应用这些前端技术，实现网页内容的本地化交互。
2025-11-11 11:49:29
892
使用纯JavaScript实现基于选择框的动态表单字段显示 本教程详细阐述如何利用纯JavaScript，通过监听元素的onchange事件，实现表单字段的动态生成与更新。用户选择不同数量的选项时，页面会实时显示对应数量的输入框，从而提升表单的交互性和用户体验。
2025-11-11 11:49:12
283
解决React组件未渲染与undefined错误：组件命名、渲染机制与最佳实践 本教程详细解析React组件在App.js中引用时出现未渲染、undefined错误及no-unused-vars警告的常见原因。文章将重点阐述React组件的PascalCase命名规范、单一根DOM渲染机制，并推荐使用现代函数式组件，帮助开发者避免常见陷阱，确保组件正确加载与显示。
2025-11-11 11:48:38
768
Select2联动清空策略：解决无限循环调用问题 本文旨在解决Select2下拉菜单在联动清空时常见的“Maximumcallstacksizeexceeded”无限循环错误。核心问题在于当通过代码清空一个Select2时，不应同时触发其change事件，否则会导致两个下拉菜单之间反复互相清空。正确的做法是仅使用.val([])来清除选定值，避免不必要的事件触发，从而确保联动功能的稳定运行。
2025-11-11 11:45:01
641
js如何找到html_JavaScript获取HTML元素(DOM操作)方法 推荐优先使用querySelector和querySelectorAll，因其支持复杂CSS选择器且语法简洁；2.根据id、标签名、类名或name属性也可获取元素，分别适用于唯一标识、批量操作或表单场景。
2025-11-11 11:42:02
484
JavaScript动态设置CSS样式：解决随机定位单位缺失问题 本教程将指导开发者如何使用JavaScript正确地为HTML元素设置随机CSS定位。文章重点揭示了在使用setAttribute(‘style’,...)动态修改left等定位属性时，因缺失CSS单位（如px）而导致样式不生效的常见问题，并提供了详细的修正方法和最佳实践，确保元素能够按预期实现随机位置移动。
2025-11-11 11:41:01
372
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部