题目：

实现的纵向焦点图片轮换，效果如下图所示：


JavaScript实例09 | 实现的纵向焦点图片轮换
原创2021-12-13 10:39·开始study
题目：

实现的纵向焦点图片轮换，效果如下图所示：

JavaScript实例09 | 实现的纵向焦点图片轮换

JavaScript实例09 | 实现的纵向焦点图片轮换
分析：

监听鼠标mouseover事件，设置右侧列表对应项的样式。
改变左侧图片的CSS属性，只显示对应的图片。
通过改变HTML的CSS类来实现上述功能。

具体步骤：

01基础HTML和CSS代码
HTML代码如下：

<div class="layout">
  <ul class="ul_01">
    <li>
      <img src="images/亚丁.jpg" alt="" />
    </li>
    <li>
      <img src="images/云南大理.jpg" alt="" />
    </li>
    <li>
      <img src="images/桂林初冬.jpg" alt="" />
    </li>
    <li>
      <img src="images/新疆.jpg" alt="" />
    </li>
    <li>
      <img src="images/兴安灵渠.jpg" alt="" />
    </li>
    <li>
      <img src="images/内蒙古.jpg" alt="" />
    </li>
    <li>
      <img src="images/黄昏之上的夜色.jpg" alt="" />
    </li>
  </ul>
  <ul class="ul_02">
    <li class="current" onmouseover="imgShow(this)">
      极致美景 中国七大秋色斑斓地
    </li>
    <li onmouseover="imgShow(this)">畅游大理 体味民族风情</li>
    <li onmouseover="imgShow(this)">桂林初冬 浓妆淡抹最佳处</li>
    <li onmouseover="imgShow(this)">
      新疆库尔勒 铁关西天涯极目少行
    </li>
    <li onmouseover="imgShow(this)">历史遗产：兴安灵渠</li>
    <li onmouseover="imgShow(this)">神秘美丽的内蒙古草原</li>
    <li onmouseover="imgShow(this)">回归自然 感受另类风情</li>
  </ul>
</div>

CSS代码如下：

body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
  font-size: 12px;
}

.layout {
  width: 612px;
  height: 266px;
  margin: 50px auto;
  border: 1px solid #c63;
}
.ul_01 {
  float: left;
  position: relative;
  z-index: -11;
}
.ul_01 > li {
  width: 400px;
  height: 266px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.ul_01 > li > img {
  width: 100%;
  height: 100%;
}
.ul_02 {
  width: 212px;
  height: auto;
  float: right;
}
.ul_02 > li {
  line-height: 38px;
  background: url(images/bg_j04.jpg) no-repeat;
  padding-left: 30px;
  cursor: pointer;
}
.ul_02 > .current {
  background: url(images/bg_j05.png) no-repeat;
  margin-left: -13px;
  padding-left: 35px;
  color: #fff;
}

02JavaScript代码
为了方便，我们使用jQuery实现，别忘了引入jQuery。

<script src="https://blog.fqidc.cn/jquery-3.4.1.min.js"></script>

JavaScript的主要逻辑是，当鼠标移到某个列表项上时，首先移除所有列表项的样式，其目的是去除之前设置的样式。然后再设置这个列表项的样式为选中样式。JavaScript代码如下：

// 获取图片列表和文字列表
var $nodeImg = $(".ul_01 li");
var $nodeText = $(".ul_02 li");

function imgShow(obj) {
  // 移除所有文字列表项样式
  $nodeText.removeClass();
  // 给当前列表项添加样式
  $(obj).addClass("current");

  // 先隐藏所有图片
  $nodeImg.css("display", "none");
  // 然后在显示列表项对应的图片
  $nodeImg.eq($(obj).index()).css("display", "block");
}