jquery 圆形旋转图片滚动切换效果

下面我将为你讲解实现“jQuery 圆形旋转图片滚动切换效果”的步骤和示例。

思路分析

1.准备好一个存放图片的容器和导航圆点。

2.对于导航圆点，可以使用 HTML 标签结构模拟，或者使用 CSS 画 circle。

3.图片在容器中使用 HTML 标签 img 插入。

4.为图片容器中的图片添加相同的宽度和高度，使得图片形成一个正方形。

5.使用 jQuery 控制图片的旋转和切换。

6.当鼠标悬停在导航圆点上时，切换到对应的图片。

7.当鼠标点击导航圆点时，滚动到对应的图片位置。

实现步骤

步骤1：HTML 结构

创建HTML文件，并准备好容器和导航圆点。

<div class="slider">
  <ul class="img-box">
    <li><img src="img/1.jpg" /></li>
    <li><img src="img/2.jpg" /></li>
    <li><img src="img/3.jpg" /></li>
    <li><img src="img/4.jpg" /></li>
    <li><img src="img/5.jpg" /></li>
  </ul>
  <ul class="control-nav">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

步骤2：CSS 样式

使用 CSS 样式，设置容器的宽度和高度，并将容器中的图片使用绝对定位，进行布局。同时，对于导航圆点，可以使用 CSS 画圆。

.slider {
  width: 560px;
  height: 560px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #ccc;
}
.img-box {
  width: 1560px;
  height: 560px;
  position: absolute;
  left: -500px;
}
.img-box li {
  width: 560px;
  height: 560px;
  float: left;
  list-style: none;
}
.control-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}
.control-nav li {
  width: 10px;
  height: 10px;
  list-style: none;
  background: #ccc;
  display: inline-block;
  border-radius: 50%;
  margin: 0 8px;
  cursor: pointer;
}
.control-nav li.active {
  background-color: #333;
  cursor: default;
}

步骤3：JavaScript 代码

使用 jQuery 控制滚动效果和导航圆点的悬停事件和点击事件。

$(function() {

  var len = $('.slider li').length,
    index = 0,
    timer = null;

  $('.control-nav li').eq(0).addClass('active');

  // 鼠标悬停圆点，切换到对应图片
  $('.control-nav li').mouseover(function() {
    index = $(this).index();
    $(this).addClass('active').siblings().removeClass('active');
    $('.img-box').stop().animate({ 'left': -index * 560 }, 500);
  });

  // 自动滚动
  timer = setInterval(function() {
    index++;
    if (index >= len) {
      index = 0;
    }
    $('.control-nav li').eq(index).addClass('active').siblings().removeClass('active');
    $('.img-box').stop().animate({ 'left': -index * 560 }, 500);
  }, 2000);

  // 鼠标悬停，停止自动滚动
  $('.slider').mouseover(function() {
    clearInterval(timer);
  });

  // 鼠标离开，继续自动滚动
  $('.slider').mouseout(function() {
    timer = setInterval(function() {
      index++;
      if (index >= len) {
        index = 0;
      }
      $('.control-nav li').eq(index).addClass('active').siblings().removeClass('active');
      $('.img-box').stop().animate({ 'left': -index * 560 }, 500);
    }, 2000);
  });

});

示例解释

在以上代码中，我们使用了 jQuery 来实现图片的滚动切换效果。其中，图片容器使用 position: absolute 进行绝对定位，导航圆点则使用 position: absolute 进行绝对定位，并使用 transform: translateX(-50%) 对导航圆点进行居中处理。

在 jQuery 部分，我们使用 mouseover() 和 mouseout() 函数控制鼠标悬停事件，并使用 animate() 函数进行图片的滚动切换。

在自动滚动方面，我们使用 setInterval() 函数不断切换图片，变量 index 来控制当前图片的位置。同时，在滚动中需要对导航圆点进行激活状态的切换，使用 addClass() 函数来添加 active 类，并使用 siblings() 函数来选择其他兄弟元素。

以上就是一个简单的 “jQuery 圆形旋转图片滚动切换效果” 的实现示例。