JS使用tween.js动画库实现轮播图并且有切换功能

关键词

JS使用tween.js动画库实现轮播图并且有切换功能

下面是使用tween.js实现轮播图并且有切换功能的攻略，包含两个示例说明。

1. 引入tween.js库

在HTML文档的标签中添加tween.js库的链接：

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script>
</head>

2. 编写CSS样式和HTML结构

首先，需要给轮播图设置一个固定的宽度和高度，同时需要把轮播图内部的所有元素都设置为绝对定位，以实现轮播图的移动效果。

接下来，编写HTML结构，可以使用ul和li标签，例如：

<div id="slider">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

写完HTML后，还需为轮播图编写CSS样式，例如：

#slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
#slider ul {
  position: relative;
  width: 1800px;
  height: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#slider ul li {
  position: absolute;
  left: 0;
  top: 0;
}

3. 编写JavaScript代码

在JavaScript中，首先需要获取轮播图的元素和图片的宽度：

var slider = document.getElementById('slider');
var sliderWidth = slider.offsetWidth;

接下来，需要为轮播图的每个li元素创建一个Tween对象，并将其保存在一个数组中。Tween对象可以实现从一个值到另一个值的平滑过渡，例如从一个位置移动到另一个位置。

var tweens = [];
var lis = slider.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
  tweens.push(new TWEEN.Tween(lis[i].style));
}

接下来，需要编写切换图片的函数。在每次切换时，都需要让轮播图的ul元素向左移动图片宽度的距离，并更新Tween对象的起点和终点。

function switchImage(nextIndex) {
  var currentTween = tweens[currentIndex];
  var nextTween = tweens[nextIndex];

  // 让ul元素向左移动图片宽度的距离
  var targetLeft = -nextIndex * sliderWidth;
  currentTween.to({left: targetLeft}, 1000);
  nextTween.to({left: targetLeft + sliderWidth}, 1000);

  // 开始动画
  currentTween.start();
  nextTween.start();

  // 更新当前图片的索引
  currentIndex = nextIndex;
}

最后，在JavaScript代码的主函数中，可以使用setInterval函数不断调用switchImage函数来切换图片。例如：

var currentIndex = 0;
setInterval(function() {
  var nextIndex = (currentIndex + 1) % lis.length;
  switchImage(nextIndex);
}, 3000);

示例一：左右滑动切换轮播图

下面是一个根据tween.js实现的左右滑动切换轮播图的示例，代码如下：

HTML代码：

<div class="slider-container">
  <ul class="slider-content">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
  <div class="slider-control">
    <a class="slider-prev" href="#">Prev</a>
    <a class="slider-next" href="#">Next</a>
  </div>
</div>

CSS代码：

.slider-container {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider-content {
  position: relative;
  width: 1800px;
  height: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.slider-content li {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  width: 600px;
  height: 400px;
}
.slider-control {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
}
.slider-control a {
  display: inline-block;
  margin: 0 20px;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
}

JavaScript代码：

var sliderContainer = document.querySelector('.slider-container');
var sliderContent = sliderContainer.querySelector('.slider-content');
var sliderWidth = sliderContainer.offsetWidth;

var tweens = [];
var lis = sliderContent.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
  tweens.push(new TWEEN.Tween(lis[i].style));
}

var currentIndex = 0;
function switchImage(nextIndex) {
  var currentTween = tweens[currentIndex];
  var nextTween = tweens[nextIndex];

  var targetLeft = -nextIndex * sliderWidth;
  currentTween.to({left: targetLeft}, 1000);
  nextTween.to({left: targetLeft + sliderWidth}, 1000);

  currentTween.start();
  nextTween.start();

  currentIndex = nextIndex;
}

var prevButton = sliderContainer.querySelector('.slider-prev');
var nextButton = sliderContainer.querySelector('.slider-next');
prevButton.addEventListener('click', function(event) {
  event.preventDefault();
  var nextIndex = (currentIndex - 1 + lis.length) % lis.length;
  switchImage(nextIndex);
});
nextButton.addEventListener('click', function(event) {
  event.preventDefault();
  var nextIndex = (currentIndex + 1) % lis.length;
  switchImage(nextIndex);
});

setInterval(function() {
  var nextIndex = (currentIndex + 1) % lis.length;
  switchImage(nextIndex);
}, 3000);

示例二：淡入淡出切换轮播图

下面是一个根据tween.js实现的淡入淡出切换轮播图的示例，代码如下：

HTML代码：

<div class="slider-container">
  <ul class="slider-content">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
  <div class="slider-control">
    <a class="slider-prev" href="#">Prev</a>
    <a class="slider-next" href="#">Next</a>
  </div>
</div>

CSS代码：

.slider-container {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider-content {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slider-content li {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.slider-content li.active {
  opacity: 1;
}
.slider-control {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
}
.slider-control a {
  display: inline-block;
  margin: 0 20px;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
}

JavaScript代码：

var sliderContainer = document.querySelector('.slider-container');
var sliderContent = sliderContainer.querySelector('.slider-content');
var sliderWidth = sliderContainer.offsetWidth;

var tweens = [];
var lis = sliderContent.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
  tweens.push(new TWEEN.Tween(lis[i].style));
}

var currentIndex = 0;
function switchImage(nextIndex) {
  var currentTween = tweens[currentIndex];
  var nextTween = tweens[nextIndex];

  currentTween.to({opacity: 0}, 1000);
  nextTween.to({opacity: 1}, 1000);

  currentTween.onComplete(function() {
    lis[currentIndex].classList.remove('active');
    lis[nextIndex].classList.add('active');
  });

  currentTween.start();
  nextTween.start();

  currentIndex = nextIndex;
}

var prevButton = sliderContainer.querySelector('.slider-prev');
var nextButton = sliderContainer.querySelector('.slider-next');
prevButton.addEventListener('click', function(event) {
  event.preventDefault();
  var nextIndex = (currentIndex - 1 + lis.length) % lis.length;
  switchImage(nextIndex);
});
nextButton.addEventListener('click', function(event) {
  event.preventDefault();
  var nextIndex = (currentIndex + 1) % lis.length;
  switchImage(nextIndex);
});

lis[currentIndex].classList.add('active');
setInterval(function() {
  var nextIndex = (currentIndex + 1) % lis.length;
  switchImage(nextIndex);
}, 3000);

本文链接：http://task.lmcjl.com/news/11672.html

展开阅读全文

上一篇：JavaScript中 ES6 generator数据类型详解下一篇：巧影去除视频原声的具体方法步骤

热门文章排行

推荐文章

关键词

JS使用tween.js动画库实现轮播图并且有切换功能

1. 引入tween.js库

2. 编写CSS样式和HTML结构

3. 编写JavaScript代码

示例一：左右滑动切换轮播图

示例二：淡入淡出切换轮播图