下面是使用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);
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS使用tween.js动画库实现轮播图并且有切换功能 - Python技术站