jquery实现鼠标悬浮停止轮播特效

下面我来详细讲解“jquery实现鼠标悬浮停止轮播特效”的完整攻略。

步骤一：HTML结构

首先，我们需要在HTML文件中先构建出需要用到的轮播组件结构。这里我们采用了最常见的轮播组件形式，即左右箭头和轮播图内容，具体代码如下：

<div class="slider-wrapper">
  <div class="slider">
    <ul>
      <li><img src="slider1.jpg" alt=""></li>
      <li><img src="slider2.jpg" alt=""></li>
      <li><img src="slider3.jpg" alt=""></li>
      <li><img src="slider4.jpg" alt=""></li>
      <li><img src="slider5.jpg" alt=""></li>
    </ul>
  </div>
  <div class="slider-nav">
    <a href="javascript:void(0);"> < </a>
    <a href="javascript:void(0);"> > </a>
  </div>
</div>

步骤二：CSS样式

接下来，我们需要为构建出来的组件添加样式，这里我们需要设置一些基本的样式，比如：

.slider-wrapper {
  position: relative;
  margin: 0 auto;
  width: 600px;
  height: 300px;
}

.slider {
  position: absolute;
  width: 6000px;
  height: 300px;
  left: 0;
  top: 0;
}

.slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 600px;
  height: 300px;
  overflow: hidden;
}

.slider ul li {
  float: left;
  width: 600px;
  height: 300px;
}

.slider ul li img {
  display: block;
  width: 100%;
  height: 100%;
}

.slider-nav {
  position: absolute;
  width: 130px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -70px;
}

.slider-nav a {
  display: block;
  float: left;
  margin: 0 10px;
  width: 50px;
  height: 50px;
  background: #ccc;
  text-align: center;
  font-size: 30px;
  color: white;
  text-decoration: none;
  line-height: 50px;
  border-radius: 50%;
}

步骤三：jQuery实现轮播特效

接下来，在添加好HTML和CSS之后，我们需要使用jQuery来实现轮播特效。为了方便维护代码，我们将全部代码集成在一个jquery.slider.js文件中，代码如下：

$(function(){
  var slide = $('.slider'),
      ul = slide.find("ul"),
      lis = ul.find("li"),
      sliderNav = $(".slider-nav"),
      prev = sliderNav.find("a:first"),
      next = sliderNav.find("a:last"),
      sliderWidth = slide.width(),
      slideTimer,
      index = 0;

  // 动态设置轮播图区域的宽高
  slide.css({
    width: sliderWidth,
    height: lis.eq(0).height()
  });

  // 设置li总宽度
  ul.css('width', (lis.length * sliderWidth));

  // 点击下一张
  next.bind('click', function (event) {
    event.preventDefault();

    if (ul.is(':animated')) {
      return false;
    }

    index++;

    if (index >= lis.length) {
      index = 0;
    }

    ul.animate({'left': -sliderWidth*index}, 500);
  });

  // 点击上一张
  prev.bind('click', function(event) {
    event.preventDefault();

    if (ul.is(':animated')) {
      return false;
    }

    index--;

    if (index < 0) {
      index = lis.length-1;
    }

    ul.animate({'left': -sliderWidth*index}, 500);
  });

  // 自动轮播
  start();
  function start() {
    slideTimer = setInterval(function () {
      next.trigger('click');
    }, 3000);
  }

  // 悬浮暂停
  slide.hover(function() {
    clearInterval(slideTimer);
  }, function() {
    start();
  });
});

在这段代码中，我们首先获取了轮播图组件中需要用到的元素对象和参数数据等，并用上述CSS对其样式进行初始化和设置。

由于我们需要实现轮播图的自动循环和悬停暂停效果，因此，我们采用了两种计时器来实现。

在点击左右箭头区域时，ul元素会通过jQuery的animate()方法实现切换，从而实现轮播图的滑动效果。

示例一：基础轮播特效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>轮播特效示例</title>
    <style>
      /* 样式代码 */
    </style>
  </head>
  <body>
    <div class="slider-wrapper">
      <div class="slider">
        <ul>
          <li><img src="slider1.jpg" alt=""></li>
          <li><img src="slider2.jpg" alt=""></li>
          <li><img src="slider3.jpg" alt=""></li>
        </ul>
      </div>
      <div class="slider-nav">
        <a href="javascript:void(0);"> < </a>
        <a href="javascript:void(0);"> > </a>
      </div>
    </div>
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="jquery.slider.js"></script>
  </body>
</html>

示例二：改变轮播图片数量

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>轮播特效示例</title>
    <style>
      /* 样式代码 */
    </style>
  </head>
  <body>
    <div class="slider-wrapper">
      <div class="slider">
        <ul>
          <li><img src="slider1.jpg" alt=""></li>
          <li><img src="slider2.jpg" alt=""></li>
          <li><img src="slider3.jpg" alt=""></li>
          <li><img src="slider4.jpg" alt=""></li>
          <li><img src="slider5.jpg" alt=""></li>
          <li><img src="slider6.jpg" alt=""></li>
        </ul>
      </div>
      <div class="slider-nav">
        <a href="javascript:void(0);"> < </a>
        <a href="javascript:void(0);"> > </a>
      </div>
    </div>
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="jquery.slider.js"></script>
  </body>
</html>

以上就是“jquery实现鼠标悬浮停止轮播特效”的完整攻略，希望本篇文章能够帮助到您。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现鼠标悬浮停止轮播特效 - Python技术站