实现轮播图
思路
实现动画
- 构建一个滑条，这个滑条包含banner1,banner2,banner3,banner4,banner1图片，设置这个滑条的display:flex，
- 图片水平铺展为一个滑条
- 设置滑条的父级元素高度为图片的高度（通过监听window.load事件实现）
$(w).on(‘load resize‘, function(e){
$(‘div.banner‘).each(function(){
$(this).height($(this).find(‘img‘).first().height())
})
});
- 用jQuery animate 滑条的 css left 属性来实现动画
$(‘.banner-pic-slider‘).stop().animate({
‘left‘ : -num * bannerWidth + ‘px‘
}, 2000, function(){
if(callback){
callback();
}
});
- 实现切换当前图片的功能
- 用一个变量标记当前是第几张图
- 根据要切换第几张图切换
- 为了实现循环效果，最后一张图切换回第一张图会有所不同
var selectPic = function(num, callback){
num = num || 0;
currentNum = num % 4;
if (num != 4){
$(‘.pagination-item‘).eq(num).addClass(‘active‘).siblings().removeClass(‘active‘);
var bannerWidth = $(‘.banner‘).width();
$(‘.banner-pic-slider‘).stop().animate({
‘left‘ : -num * bannerWidth + ‘px‘
}, 2000, function(){
if(callback){
callback();
}
});
return
}
// 到最后一张图 产生循环效果 继续往右拉 然后设置 left 0
$(‘.pagination-item‘).eq(0).addClass(‘active‘).siblings().removeClass(‘active‘);
var bannerWidth = $(‘.banner‘).width();
$(‘.banner-pic-slider‘).stop().animate({
‘left‘ : -4 * bannerWidth + ‘px‘
}, 2000, function(){
$(this).css({
"left" : 0
});
if(callback){
callback();
}
});
};
实现循环播放
- 编写setBannerAutoPlay方法，具有关闭自动播放和开始自动播放的功能
- 设置点击pagination区域触发 关闭自动播放，点击造成的jQuery动画结束后再开始播放
- 播放到最后一张图时，再往后拉一张图，然后设置left为0
var setBannerAutoPlay = (function(){
var playing = false;
var intervalId = 0;
return function(play){
// 如果要播放
if (play){
if (playing){
return
}
intervalId = setInterval(function(){
selectPic(currentNum + 1)
}, 3000);
console.log(‘play start‘);
playing = true;
return
}
// 如果要停止
if ( playing ){
clearInterval(intervalId);
playing = false;
console.log(‘play stop‘);
}
}
})();
实现点击切换
- 监听pagination区域的click事件， 通过$(.pagination-item).parent().children().index(this) 获得点击了第几块
- 编写selectPic(num, callback) 函数，根据 num 切换图片 主要是jQuery动画
$(‘.pagination-item‘).on(‘click‘,function(){
setBannerAutoPlay(false)
var num = $(this).parent().children().index(this);
selectPic(num, function(){
setBannerAutoPlay(true);
});
});
全部代码
<div class="banner">
<div class="banner-pic-slider">
<img class="active" src="img/banner1.jpg" alt="">
<img class="" src="img/banner2.jpg" alt="">
<img class="" src="img/banner3.jpg" alt="">
<img class="" src="img/banner4.jpg" alt="">
<img class="" src="img/banner1.jpg" alt="">
</div>
<div class="pagination">
<div class="pagination-item active"></div>
<div class="pagination-item"></div>
<div class="pagination-item"></div>
<div class="pagination-item"></div>
</div>
</div>
/*轮播图*/
div.banner{
width: 100%;
position: relative;
overflow: hidden;
}
div.banner-pic-slider{
display: flex;
flex-flow: row nowrap;
position: absolute;
left: 0;
}
div.banner img{
width: 6.4rem;
flex: 0 0 auto;
height: 100%;
}
div.banner div.pagination{
position: absolute;
bottom: 10px;
display: flex;
justify-content: space-evenly;
width: calc( .16rem * 6);
left: 0;
right: 0;
margin: 0 auto;
cursor: pointer;
}
div.pagination-item{
width: .16rem;
height: .16rem;
border-radius: 50%;
background: #ccc;
}
div.pagination-item.active{
background: #fff;
}
(function(w, d){
// 修改 banner 宽度为内部图片宽度
var currentNum = 0;
$(w).on(‘load resize‘, function(e){
$(‘div.banner‘).each(function(){
$(this).height($(this).find(‘img‘).first().height())
})
});
// 改变当前图片
var selectPic = function(num, callback){
num = num || 0;
currentNum = num % 4;
if (num != 4){
$(‘.pagination-item‘).eq(num).addClass(‘active‘).siblings().removeClass(‘active‘);
var bannerWidth = $(‘.banner‘).width();
$(‘.banner-pic-slider‘).stop().animate({
‘left‘ : -num * bannerWidth + ‘px‘
}, 2000, function(){
if(callback){
callback();
}
});
return
}
// 到最后一张图 产生循环效果 继续往右拉 然后设置 left 0
$(‘.pagination-item‘).eq(0).addClass(‘active‘).siblings().removeClass(‘active‘);
var bannerWidth = $(‘.banner‘).width();
$(‘.banner-pic-slider‘).stop().animate({
‘left‘ : -4 * bannerWidth + ‘px‘
}, 2000, function(){
$(this).css({
"left" : 0
});
if(callback){
callback();
}
});
};
// 0 停止 1 开始
var setBannerAutoPlay = (function(){
var playing = false;
var intervalId = 0;
return function(play){
// 如果要播放
if (play){
if (playing){
return
}
intervalId = setInterval(function(){
selectPic(currentNum + 1)
}, 3000);
console.log(‘play start‘);
playing = true;
return
}
// 如果要停止
if ( playing ){
clearInterval(intervalId);
playing = false;
console.log(‘play stop‘);
}
}
})();
setBannerAutoPlay(true);
// 点击pagination显示当前图片
$(‘.pagination-item‘).on(‘click‘,function(){
setBannerAutoPlay(false)
var num = $(this).parent().children().index(this);
selectPic(num, function(){
setBannerAutoPlay(true);
});
});
})(window, document);
