jQuery实现自动与手动切换的滚动新闻特效代码分享

下面我来详细讲解“jQuery实现自动与手动切换的滚动新闻特效代码分享”的完整攻略。这个特效可以让你的网站拥有带有无限滚动、自动播放、手动切换等功能的新闻动态栏。步骤如下：

制作HTML结构

首先，我们需要在HTML页面中添加一个容器的div，然后在其中添加新闻动态内容和按钮区域：

<div class="news-container">
  <ul class="news-box">
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
    <li>新闻5</li>
  </ul>
  <div class="btn-box">
    <button class="prev-btn">&lt;</button>
    <button class="next-btn">&gt;</button>
  </div>
</div>

这里，我们采用无序列表（ul）来存放新闻动态内容。按钮区域可以使用div容器或按钮元素（button、a）来实现。

CSS样式设置

接下来，我们需要给新闻容器和按钮容器设置样式：

.news-container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.news-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  height: 300px;
  padding: 0;
  margin: 0;
}
.news-box li {
  list-style: none;
  height: 60px;
  line-height: 60px;
  font-size: 24px;
  text-align: center;
  color: #333;
}
.btn-box {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 999;
  transform: translateY(-50%);
}
.prev-btn,
.next-btn {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ccc;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  margin: 0 10px;
}

这里，我们设置新闻容器的宽度、高度和布局方式。设置无序列表的位置、大小和属性，同时为每个新闻条目设置样式。设置按钮容器的位置、大小和样式。最后，为上一页和下一页按钮设置样式。

jQuery插件引用

在文件头部引入jQuery插件:

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

jQuery实现

接下来，我们要使用jQuery实现自动播放和手动切换。

$(function() {
  var newsHeight = $(".news-box li").height(); // 每条新闻的高度
  var newsCount = $(".news-box li").length; // 新闻的总数
  var newsBoxHeight = $(".news-box").height(); // 新闻框高度
  var newsIndex = 0; // 当前显示的新闻索引

  // 点击上一页
  $(".prev-btn").click(function() {
    newsIndex--;
    if (newsIndex < 0) {
      newsIndex = newsCount - 1;
      $(".news-box").css("top", -newsHeight * (newsCount-1));
    }
    $(".news-box").stop().animate({top: -newsHeight * newsIndex}, 500);
  });

  // 点击下一页
  $(".next-btn").click(function() {
    newsIndex++;
    if (newsIndex >= newsCount) {
      newsIndex = 0;
      $(".news-box").css("top", 0);
    }
    $(".news-box").stop().animate({top: -newsHeight * newsIndex}, 500);
  });

  // 自动滚动
  var timer = setInterval(function() {
    $(".next-btn").click();
  }, 2000);

  // 鼠标移入移出事件
  $(".news-container").hover(function() {
    clearInterval(timer);
  }, function() {
    timer = setInterval(function() {
      $(".next-btn").click();
    }, 2000);
  });
});

这里，我们首先获取新闻高度、新闻总数和新闻框高度。然后，我们监听上一页和下一页按钮的点击事件，利用animate()函数实现新闻切换。接着，我们使用setInterval()函数实现自动滚动，使用hover()函数来取消或重新开启自动滚动。

示例1：利用jQuery插件实现

除了上面的手写方法，我们还可以使用jQuery插件来实现自动切换的新闻特效。以下为一个例子：

<div class="news-container2">
  <ul class="news-box2">
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
    <li>新闻5</li>
  </ul>
</div>

<script>
  $(function() {
    $(".news-box2").liMarquee({
      direction: "up",
      scrollamount: 20,
      circular: true,
      drag: false,
      hoverstop: false
    });
  });
</script>

此时无需手写代码，我们只需引入liMarquee插件，然后给ul添加class="news-box2"即可实现相同的效果。

示例2：改良版

最终我们可以改良一下代码，来达到更好的效果。我们可以添加动画进度条，以更直观的方式提示用户当前所处新闻的位置。下面是改良后的示例代码：

<div class="news-container3">
  <ul class="news-box3">
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
    <li>新闻5</li>
  </ul>
  <div class="progress-box3">
    <div class="progress-bar3"></div>
  </div>
</div>

<script>
  $(function() {
    var newsHeight = $(".news-box3 li").height();
    var newsCount = $(".news-box3 li").length;
    var newsBoxHeight = $(".news-box3").height();
    var newsIndex = 0;
    var progressBar = $(".progress-bar3");

    $(".news-box3").append($(".news-box3 li:first").clone(true)); // 末尾添加第一条新闻

    $(".prev-btn, .next-btn").click(function() {
      var buttonClass = $(this).attr("class");
      if (buttonClass.indexOf("prev-btn") >= 0) {
        newsIndex--;
        if (newsIndex < 0) {
          newsIndex = newsCount - 1;
          $(".news-box3").css("top", -newsHeight * (newsCount));
        }
      }
      else {
        newsIndex++;
      }

      if (newsIndex >= newsCount + 1) {
        newsIndex = 0;
        $(".news-box3").css("top", 0);
      }

      $(".news-box3").stop().animate({top: -newsHeight * newsIndex}, 500, function() {
        if (newsIndex == newsCount) {
          $(".news-box3").css("top", 0);
          newsIndex = 0;
        }
        updateProgressBar();
      });
    });

    $(".progress-box3").click(function(e) {
      var offsetTop = $(this).offset().top;
      var boxTop = $(".news-box3").offset().top;
      var relativeTop = offsetTop - boxTop + newsHeight;
      var clickIndex = Math.floor(relativeTop / newsHeight) - 1;
      if (clickIndex == newsCount) {
        newsIndex = 0;
        $(".news-box3").css("top", 0);
        clickIndex = 0;
      }
      else {
        newsIndex = clickIndex;
      }
      $(".news-box3").stop().animate({top: -newsHeight * clickIndex}, 500, function() {
        updateProgressBar();
      });
    });

    function updateProgressBar() {
      var progressHeight = newsBoxHeight / (newsCount + 1);
      progressBar.stop().animate({height: progressHeight * (newsIndex + 1)}, 500);
    }
  });
</script>

<style>
.news-container3 {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.news-box3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  height: 300px;
  padding: 0;
  margin: 0;
}
.news-box3 li {
  list-style: none;
  height: 60px;
  line-height: 60px;
  font-size: 24px;
  text-align: center;
  color: #333;
}
.progress-box3 {
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 300px;
  background-color: #ddd;
}
.progress-bar3 {
  width: 10px;
  height: 0;
  background-color: #f00;
}
</style>

这里我们添加了末尾添加第一条新闻、点击进度条和进度条动画等改造方案，让效果更加完整和优美。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现自动与手动切换的滚动新闻特效代码分享 - Python技术站