html教程：左侧图片切换，右侧文章列表

要实现左侧图片切换和右侧文章列表，你可以使用HTML、CSS和JavaScript来完成。下面是一个简单的示例代码：

HTML部分：

<div class="container">
  <div class="image-container">
    <img src="image1.png" alt="Image 1" id="image">
  </div>
  <div class="article-list">
    <ul>
      <li>Article 1</li>
      <li>Article 2</li>
      <li>Article 3</li>
    </ul>
  </div>
</div>

CSS部分：

.container {
  display: flex;
}

.image-container {
  flex: 1;
}

.article-list {
  flex: 1;
}

ul {
   list-style-type: none;
   padding:0;
}

JavaScript部分：

var images = ["image1.png", "image2.png", "image3.png"];
var currentIndex = -1;

function changeImage() {
   currentIndex = (currentIndex + images.length + direction) % images.length;
   document.getElementById("image").src = images[currentIndex];
}

document.addEventListener("DOMContentLoaded", function() {
   changeImage(); // 初始化显示第一张图片

   // 绑定左右箭头点击事件
   document.getElementById("prev").addEventListener("click", function() { changeImage(-1); });
   document.getElementById("next").addEventListener("click", function() { changeImage(1); });
});

在上面的示例中，我们使用了一个包含两个<div>元素的容器。左侧是图片容器，右侧是文章列表容器。通过CSS的display: flex;属性将两个容器并排显示。

在JavaScript部分，我们定义了一个图片数组images，并通过currentIndex变量来跟踪当前显示的图片索引。 changeImage()函数用于切换图片。在页面加载完成后，我们初始化显示第一张图片，并为左右箭头绑定点击事件来切换图片。

请注意，上述代码只是一个简单的示例，并没有包含完整的实现逻辑和样式。你可以根据实际需求进行修改和扩展。