css3焦点图-JavaScript 示例 09| 实现水平焦点图像旋转

bendan520 2023年8月23日 css3 0

话题：

实现的水平焦点图像旋转css3焦点图，效果如右图所示：

分析：

监听键盘鼠标悬停风暴css3焦点图，并设置左侧列表中对应项的样式。 更改右侧图片的CSS属性，只显示对应的图片。 以上功能是通过改变HTML的CSS类来实现的。

具体步骤：

基本 HTML 和 CSS 代码

HTML代码如下。


  
    
    
  • 
      
    
    • 
    
  • 
      
    
    • 
    
  • 
      
    
    • 
    
  • 
      
    
    • 
    
  • 
      
    
    • 
    
  • 
      
    
    • 
    
  • 
      
    
    • 
  

  
    
    
  • 
      极致美景 中国七大秋色斑斓地
    
    • 
    
  • 畅游大理 体味民族风情
    • 
    
  • 桂林初冬 浓妆淡抹最佳处
    • 
    
  • 
      新疆库尔勒 铁关西天涯极目少行
    
    • 
    
  • 历史遗产：兴安灵渠
    • 
    
  • 神秘美丽的内蒙古草原
    • 
    
  • 回归自然 感受另类风情
    •

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;
}

JavaScript 代码

为了方便，我们使用jQuery来实现，别忘了引入jQuery。

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");
}

完全的。