制作网页焦点图，浏览网页时只有一张图片，图片右下角上有3个小图标，第一个是圆角矩形，后面两个是圆形。当鼠标移到图片上时，左右两侧各浮现一个透明的导航。点击左右两侧导航箭头，可以实现页面的图片切换（实现：跳转到另外的页面，加载不同的图片）。

制作网页焦点图通常涉及到HTML、CSS和JavaScript（或者jQuery等库）的结合。以下是实现这个效果的一个基本步骤：

1. HTML结构:
创建一个包含图片的容器，加上三个小图标。例如：

   <div class="focus-image">
     <img src="初始图片.jpg" alt="...">
     <div class="icons">
       <span class="rectangular-icon"></span>
       <span class="circle-icons">
         <span class="first-circle"></span>
         <span class="second-circle"></span>
       </span>
     </div>
   </div>

2. CSS样式:
- 配置图片和图标的位置、大小以及悬停效果:

   .focus-image {
     position: relative;
   }
   img {
     display: block;
     max-width: 100%;
   }
   .icons {
     position: absolute;
     bottom: 10px;
     right: 10px;
   }
   .rectangular-icon {
     /* 圆角矩形样式 */
   }
   .circle-icons {
     display: inline-block;
     transform-origin: bottom right;
   }
   .circle-icons:hover {
     opacity: 0.8; /* 悬浮半透明效果 */
   }

3. JavaScript (或jQuery):
- 当鼠标悬停时，显示导航并绑定事件处理函数：

   $(document).ready(function() {
     $('.focus-image').hover(
       function() {
         $('.nav-container').fadeIn(300);
       },
       function() {
         $('.nav-container').fadeOut(300);
       });
   });

   $('.nav-button').click(function(e) {
     e.preventDefault(); // 阻止默认行为
     var nextImage = 'path/to/next/image.jpg'; // 根据需求切换图片路径
     window.location.href = nextImage; // 跳转至新的页面并加载新图
   });