JavaScript综合实战案例

让我们通过一些综合实战案例来探讨如何使用JavaScript、CSS和HTML来实现常见的前端功能。

### 10.1 焦点幻灯片

焦点幻灯片是一种常见的网页轮播图，用于展示一系列图片。

**HTML**:
```html
<div id="slider" class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    
  </div>
  <a class="prev" onclick="moveSlide(-1)">&#10094;</a>
  <a class="next" onclick="moveSlide(1)">&#10095;</a>
</div>
```

**CSS**:
```css
.slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slides img {
  width: 100%;
  display: block;
}
```

**JavaScript**:
```javascript
let currentSlide = 0;
const slides = document.querySelectorAll('.slides img');
const totalSlides = slides.length;

function moveSlide(direction) {
  const newSlide = currentSlide + direction;
  if (newSlide >= 0 && newSlide < totalSlides) {
    slides[currentSlide].style.transform = 'translateX(100%)';
    currentSlide = newSlide;
    slides[currentSlide].style.transform = 'translateX(0)';
  }
}

// Automatic slide change
setInterval(() => {
  moveSlide(1);
}, 3000);
```

### 10.2 菜单导航

一个响应式的导航菜单，用于网站的页面导航。

**HTML**:
```html
<nav>
  <ul class="nav-menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
```

**CSS**:
```css
.nav-menu {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav-menu li {
  margin: 0 10px;
}

.nav-menu a {
  text-decoration: none;
  color: #333;
}
```

**JavaScript** (for mobile menu toggle):
```javascript
const menu = document.querySelector('.nav-menu');
const mobileMenu = document.getElementById('mobile-menu');

mobileMenu.addEventListener('click', () => {
  menu.classList.toggle('active');
});
```

### 10.3 Tab选项卡

选项卡用于在不同的内容区域之间切换。

**HTML**:
```html
<div class="tab-container">
  <ul class="tab-list">
    <li class="tab-link active" data-tab="tab-1">Tab 1</li>
    <li class="tab-link" data-tab="tab-2">Tab 2</li>
    <li class="tab-link" data-tab="tab-3">Tab 3</li>
  </ul>
  <div id="tab-1" class="tab-content active">
    <p>Content for Tab 1</p>
  </div>
  <div id="tab-2" class="tab-content">
    <p>Content for Tab 2</p>
  </div>
  <div id="tab-3" class="tab-content">
    <p>Content for Tab 3</p>
  </div>
</div>
```

**CSS**:
```css
.tab-list {
  list-style: none;
  padding: 0;
  display: flex;
}

.tab-link {
  padding: 10px;
  cursor: pointer;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}
```

**JavaScript**:
```javascript
document.querySelectorAll('.tab-link').forEach(link => {
  link.addEventListener('click', () => {
    document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
    link.classList.add('active');
    document.querySelectorAll('.tab-content').forEach(content => {
      content.style.display = 'none';
    });
    const activeTab = document.querySelector(`#${link.getAttribute('data-tab')}`);
    activeTab.style.display = 'block';
  });
});
```}

### 10.4 图片特效

使用CSS和JavaScript实现图片的淡入淡出效果。

**HTML**:
```html
<img src="image.jpg" alt="Image" id="dynamic-image">
```

**CSS**:
```css
#dynamic-image {
  opacity: 0;
  transition: opacity 2s;
}
```

**JavaScript**:
```javascript
document.addEventListener('DOMContentLoaded', () => {
  const image = document.getElementById('dynamic-image');
  setTimeout(() => {
    image.style.opacity = 1;
  }, 500); // Delay for effect
});
```

### 10.5 文字特效

使用CSS实现文字的打字机效果。

**HTML**:
```html
<div id="typewriter-text"></div>
```

**CSS**:
```css
#typewriter-text {
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid;
  letter-spacing: 2px;
}
```

**JavaScript**:
```javascript
const text = "Hello, this is a typewriter effect!";
const speed = 100;
let index = 0;

function typeWriter() {
  if (index < text.length) {
    document.getElementById('typewriter-text').innerHTML += text.charAt(index);
    index++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();
```

这些案例展示了如何使用前端技术实现一些常见的网页效果。每个案例都可以根据具体需求进行扩展和优化。如果你有任何问题或需要进一步的解释，请随时提问。