js菜鸟笔记之图片滚动_ekom.cn资源-CSDN文库

需积分: 3 135 浏览量 2012-07-26 16:14:58 上传评论收藏 2KB TXT 举报

根据给定的信息，本文将对页面中的图片滚动效果进行详细解析。这涉及到JavaScript与CSS的交互使用，通过代码实现图片的自动滚动展示。 ### 一、网页布局与样式设计 #### 1. 页面结构该网页使用了HTML5的基本文档类型声明，并在`<head>`标签中定义了一个简单的样式表。整个页面由一个`<div>`容器（id为“demo”）组成，内部包含另一个`<div>`容器（id为“indemo”），以及两个子`<div>`（id分别为“demo1”和“demo2”）。在“demo1”容器中，通过`<a>`标签链接多个相同的图片。 #### 2. CSS样式 - `#demo`: 设置背景色为白色、边框为灰色虚线、宽度为500像素，并使用`overflow:hidden;`隐藏溢出的内容。 - `#demo img`: 图片边框为淡灰色实线。 - `#indemo`: 设置宽度为800%，使其内容超出父容器，以便实现滚动效果。 - `#demo1`和`#demo2`: 使用`float:left;`使这两个容器并排显示。 ### 二、JavaScript实现自动滚动 #### 1. 变量定义 - `speed`: 定义滚动速度，单位为毫秒。 - `tab`: 获取id为“demo”的元素。 - `tab1`: 获取id为“demo1”的元素。 - `tab2`: 获取id为“demo2”的元素，并将其innerHTML设置为`tab1`的innerHTML。 #### 2. 功能函数 - `Marquee()`: 主要滚动逻辑函数，用于控制图片的滚动行为。 - 如果`tab2`的宽度减去`tab`的水平滚动位置小于等于0，则将`tab`的水平滚动位置重置为减去`tab1`的宽度。 - 否则，增加`tab`的水平滚动位置，实现图片向左移动的效果。 #### 3. 事件监听 - 使用`setInterval()`方法每隔`speed`毫秒调用一次`Marquee()`函数。 - 当鼠标悬停在`tab`上时，清除定时器`MyMar`以暂停滚动。 - 当鼠标离开`tab`时，重新设置定时器`MyMar`，继续滚动。 ### 三、实现原理分析 #### 1. HTML与CSS布局 - 通过调整`<div>`容器的宽度和浮动属性，创建了一个可以容纳多张图片的容器，并确保这些图片能够并排显示。 - 使用`overflow:hidden;`隐藏超出父容器的内容，这是实现滚动的关键。 #### 2. JavaScript动态控制 - 通过复制`demo1`的内容到`demo2`，并在循环滚动时判断条件，实现了图片的无缝滚动效果。 - 利用`setInterval()`和`clearInterval()`动态控制滚动的开始与停止，增强了用户体验。 ### 四、扩展思考 - **性能优化**：可以考虑使用CSS3的`transform: translateX()`来替代JavaScript控制滚动，提高性能。 - **兼容性处理**：针对不同浏览器的兼容性问题进行适配，如添加前缀等。 - **用户交互**：增加更多的用户交互功能，比如通过按钮控制滚动方向或速度等。该示例通过简单的HTML、CSS和JavaScript结合，实现了一个基本的图片滚动效果，适用于初学者学习。通过对上述知识点的理解，可以帮助读者更好地掌握前端开发的基础技能。

资源推荐

资源详情

资源评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Í¼Æ¬¹ö¶¯</title>
</head>
<body>
<style type="text/css">

</style>
<div id="demo">

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈