Welcome to My Website
This is a sample text to demonstrate theme switching.
```
### 2. CSS样式
接下来，我们定义两种主题的样式，并使用`.dark-theme`和`.light-theme`类来区分它们。我们还将为开关按钮添加一些样式。
```css
/* styles.css */
body {
transition: background-color 0.3s, color 0.3s;
}
.dark-theme {
background-color: #333;
color: #fff;
}
.light-theme {
background-color: #fff;
color: #333;
}
.theme-switcher {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.checkbox {
opacity: 0;
width: 0;
height: 0;
}
.label {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.label:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
.checkbox:checked + .label {
background-color: #2196F3;
}
.checkbox:checked + .label:before {
transform: translateX(26px);
}
```
### 3. JavaScript逻辑
最后，我们需要编写JavaScript代码来处理主题切换的逻辑。当用户点击开关时，我们将在`.dark-theme`和`.light-theme`类之间切换。
```javascript
// script.js
document.addEventListener('DOMContentLoaded', function() {
const themeSwitch = document.getElementById('theme-switch');
const body = document.body;
// 检查本地存储中是否有主题偏好
if (localStorage.getItem('theme') === 'dark') {
body.classList.add('dark-theme');
themeSwitch.checked = true;
} else {
body.classList.add('light-theme');
}
themeSwitch.addEventListener('change', function() {
if (this.checked) {
body.classList.remove('light-theme');
body.classList.add('dark-theme');
localStorage.setItem('theme', 'dark');
} else {
body.classList.remove('dark-theme');
body.classList.add('light-theme');
localStorage.setItem('theme', 'light');
}
});
});
```
这个简单的示例展示了如何创建一个基本的页面，其中包含一个可以在深色和浅色主题之间切换的开关。通过使用CSS类和JavaScript来控制样式，我们可以轻松地实现这种功能。此外，通过使用`localStorage`，我们可以保存用户的主题偏好，以便在他们下次访问网站时自动应用。
================================================================================
Question: 使用 JavaScript、HTML 和 CSS 创建一个图片轮播效果，每隔3秒，图片自动滑动切换，同时支持用户点击导航点进行切换。
Answer: 要创建一个图片轮播效果，我们可以使用 HTML 来构建基本的结构，CSS 来美化界面，以及 JavaScript 来实现自动切换和用户交互功能。下面是一个简单的实现示例：
### HTML
```html
