<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>转播</title> <style> *{ margin: 0; padding: 0; } #banner{ width: 640px; height: 300px; margin: 30 auto; position: relative; } ul{ list-style: none; } .imglist li{ position: absolute; left: 0; top: 0; } .left-btn,.right-btn{ width: 38px; height: 61px; display: block; position: absolute; z-index: 2; } .left-btn{ background: url(5.gif); top: 130px; } .right-btn{ background: url(5.gif) -38px 0; top: 130px; right: 0; } .focuslist{ position: absolute; bottom: 20px; right: 150px; z-index: 3; } .focuslist a{ width: 30px; height: 30px; float: left; background-color: rgb(191, 202, 212); border-radius: 50%; margin-left: 10px; } .focuslist a.cur{ background-color: rgb(230, 21, 21); } </style> <script src="jquery.js"></script> </head> <body> <div id="banner"> <ul class="imglist"> <li style="z-index: 1;"><a href=""><img src="1.jpg" alt=""></a></li> <li><a href=""><img src="2.jpg" alt=""></a></li> <li><a href=""><img src="3.jpg" alt=""></a></li> <li><a href=""><img src="4.jpg" alt=""></a></li> </ul> <button class="left-btn" href=""></button> <button class="right-btn" href=""></button> <div class="focuslist"> <a href="javascript:void(0)" class="cur"></a> <a href="javascript:void(0)"></a> <a href="javascript:void(0)"></a> <a href="javascript:void(0)"></a> </div> </div> <script> console.log($("li")); console.log($(".focuslist a")); function changeImg(xiabiao){ $("li").eq(xiabiao).fadeIn().siblings().fadeOut(); $(".focuslist a").eq(xiabiao).addClass("cur").siblings().removeClass("cur"); } var step=0; var timer=null; changeImg(step); function autoPlay(){ timer=setInterval(function(){ step++; if(step==4){ step=0; } changeImg(step); },1000) } autoPlay(); $(".focuslist a").click(function(){ clearInterval(timer); step=$(this).index(); changeImg(step); autoPlay(); }); $(".left-btn").click(function(){ clearInterval(timer); step--; if(step==-1){ step==3; } changeImg(step); autoPlay; }) $(".right-btn").click(function(){ clearInterval(timer); step++; if(step==4){ step==0; } changeImg(step); autoPlay; }) </script> </body> </html>为什么左右按钮实现不了功能

时间: 2024-01-03 20:25:41 浏览: 118

HTML-CSS.md

### HTML与CSS基础知识点 #### 一、HTML概述 **HTML** (HyperText Markup Language) 是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，主要用于描述网页的内容及其结构。 - **超文本**: 包括音频、视频、图片等内容，通过链接可以实现网页间的跳转。 - **标记**: `<英文单词或字母>` 形式的符号，用于指示浏览器如何解释和显示网页中的内容。例如，`<p>` 标签用于定义段落。 - **元素**: 由标记包围的内容，如 `<p>这是一个段落。</p>`。 - **属性**: 标签内的附加信息，如 `<img src="image.jpg">` 中的 `src` 属性指定了图像文件的位置。 #### 二、HTML的基本结构与规范 ##### 1. HTML文档结构 - **文档声明**: `<!DOCTYPE html>` 声明文档采用的HTML版本，对于HTML5而言，只需简单地写 `<!DOCTYPE html>` 即可。 - **文档类型**: `<html lang="en">` 指明文档的语言。 - **头部信息** (`<head>`): 包含了关于文档的信息，这些信息不会直接显示在页面上，但对文档的处理至关重要。 - `<meta charset="UTF-8">`: 设置文档的字符编码。 - `<title>`: 定义文档的标题，显示在浏览器标签页的标题栏上。 - **主体内容** (`<body>`): 页面可见内容的容器。 ##### 2. HTML编写规范 - **嵌套规则**: 所有的HTML标签必须正确地嵌套在一起，即开始标签和结束标签之间不能交叉。 - **大小写**: 所有标签和属性名称都应使用小写字母书写。 - **标签闭合**: 所有的标签都需要闭合。对于空标签（如 `<img>`），使用 `/` 来闭合，如 `<img src="image.jpg" />`。 - **属性值**: 所有的属性值必须用引号包围。 - **属性**: 所有的属性必须有值，即使是没有实际值的属性也需要提供一个空字符串作为占位符。 #### 三、HTML基本语法特征 - **换行与缩进**: HTML对换行和空格不敏感，但在实际编写中为了提高可读性，通常会采用一定的缩进规则。 - **空白折叠**: 多个连续的空格会被浏览器视为一个空格处理。 - **标签闭合**: 所有的标签都必须闭合，这是HTML文档结构完整性的关键。 #### 四、HTML结构示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body>  </body> </html> ``` #### 五、HTML head标签详解 - **`<base>`**: 用于设置文档中的所有相对URL的基地址。例如，如果 `<base href="https://example.com/">` 被设置，则文档中的所有相对链接都会基于这个基地址。 - **`<link>`**: 用于定义文档与外部资源的关系，最常见的是链接CSS样式表文件。 - **`<meta>`**: 用于提供关于HTML文档的元数据，如描述、关键字等。 - **`<script>`**: 用于嵌入或引用JavaScript代码。 - **`<style>`**: 用于定义内联样式。 - **`<title>`**: 用于定义文档的标题，显示在浏览器的标题栏或选项卡上。 #### 六、HTML与CSS的关系 - **HTML负责内容和结构**: HTML文档定义了网页上的内容和这些内容的组织结构。 - **CSS负责样式**: CSS (Cascading Style Sheets) 用于控制网页的布局、颜色、字体等外观方面的特性。 - **分离原则**: 最佳实践是将内容与表现形式分离，即使用HTML来定义内容结构，使用CSS来控制页面的表现形式。 HTML是构建网页的基础，它定义了页面的内容结构，而CSS则提供了美化和布局的能力。在现代Web开发中，HTML与CSS通常是紧密配合使用的。

根据你提供的代码，左右按钮没有实现功能的原因可能是以下几点： 1. 按钮的 `href` 属性是无效的，应该使用 `button` 标签或者 `a` 标签的 `href` 属性来实现跳转功能。 2. 在点击左右按钮时，应该停止自动播放，否则可能会引起切换不准确的问题。 3. 左右按钮的切换逻辑有误，应该是 `step--` 或者 `step++`，而不是 `step==3` 或者 `step==0`。你可以尝试改正以上问题，重新运行代码，看看是否能够实现左右按钮的功能。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通