下面是总体的攻略:
1. 需求分析
首先需要明确需求,也就是要实现一个仿京东移动端的轮播图效果。该效果的主要特点有:
- 手指拖动轮播图时,图片可以随着手指滑动而跟随移动,并在释放时自动定到下一个或上一个轮播图。
- 轮播图可以自动循环播放
- 底部的小圆点可以随着轮播图的切换而同步更新
2. 技术选型
实现这个效果需要使用以下技术:
- HTML、CSS、JavaScript
- jQuery
- Hammer.js(一个常用的移动端手势库)
3. 实现步骤
3.1 HTML结构
首先需要定义HTML结构,基本上就是一个容器,里面包含了不同的轮播图和底部的小圆点。示例如下:
<div class="slider">
<ul class="slider-wrapper">
<li class="slider-item"><img src="img1.jpg"></li>
<li class="slider-item"><img src="img2.jpg"></li>
<li class="slider-item"><img src="img3.jpg"></li>
</ul>
<ul class="slider-dots">
<li class="slider-dot"></li>
<li class="slider-dot"></li>
<li class="slider-dot"></li>
</ul>
</div>
3.2 CSS样式
接下来是CSS样式的设置,包括容器的宽高,轮播图的宽度和位置,以及小圆点的样式等。这里不再赘述。示例如下:
.slider {
width: 100%;
height: 200px;
position: relative;
overflow: hidden;
}
.slider .slider-wrapper {
width: 300%;
height: 100%;
position: relative;
left: -100%;
}
.slider .slider-item {
float: left;
width: 33.333%;
height: 100%;
position: relative;
}
.slider .slider-item img {
width: 100%;
height: 100%;
}
.slider .slider-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.slider .slider-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
margin-right: 10px;
}
.slider .slider-dot.active {
background-color: #f00;
}
3.3 JavaScript代码
最后是JavaScript代码的编写,包括了自动轮播和手势拖动效果的实现。示例如下:
$(function() {
var $sliderWrap = $('.slider-wrapper');
var $sliderItems = $('.slider-item');
var $sliderDots = $('.slider-dot');
var slider = {
len: $sliderItems.length,
curIdx: 0,
fromIdx: 0,
toIdx: 0,
isAnimating: false,
autoPlayTimer: null,
init: function() {
var _this = this;
// 初始化轮播图显示
$sliderWrap.css('left', '-100%');
$sliderItems.eq(0).clone().appendTo($sliderWrap);
$sliderItems.eq(-1).clone().prependTo($sliderWrap);
// 初始化小圆点
$sliderDots.eq(0).addClass('active');
$sliderDots.on('click', function() {
var idx = $(this).index();
_this.toIdx = idx;
_this.move();
});
// 自动轮播
this.autoPlay();
// 手势操作
this.bindTouchEvents();
},
autoPlay: function() {
var _this = this;
clearInterval(this.autoPlayTimer);
this.autoPlayTimer = setInterval(function() {
_this.toNext();
}, 3000);
},
toNext: function() {
this.toIdx = this.curIdx + 1;
this.move();
},
toPrev: function() {
this.toIdx = this.curIdx - 1;
this.move();
},
move: function() {
var _this = this;
if (_this.isAnimating) {
return;
}
_this.isAnimating = true;
// 修改小圆点
$sliderDots.eq(_this.curIdx).removeClass('active');
$sliderDots.eq(_this.toIdx).addClass('active');
// 目标位置
var toPos = -(_this.toIdx + 1) * 100 / (_this.len + 2) + '%';
// 动画移动
$sliderWrap.animate({ left: toPos }, 500, function() {
// 判断是否需要重置轮播图位置
if (_this.toIdx >= _this.len) {
$sliderWrap.css('left', '-100%');
_this.curIdx = 0;
_this.fromIdx = 0;
_this.toIdx = 0;
} else if (_this.toIdx < 0) {
$sliderWrap.css('left', -(_this.len * 100 / (_this.len + 2)) + '%');
_this.curIdx = _this.len - 1;
_this.fromIdx = _this.len - 1;
_this.toIdx = _this.len - 1;
} else {
_this.curIdx = _this.toIdx;
_this.fromIdx = _this.toIdx;
}
_this.isAnimating = false;
});
},
bindTouchEvents: function() {
var _this = this;
// 使用Hammer.js绑定手势事件
var hammer = new Hammer($('.slider')[0]);
hammer.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 20 });
hammer.on('swipeleft', function() {
_this.toNext();
});
hammer.on('swiperight', function() {
_this.toPrev();
});
hammer.on('panstart', function() {
clearInterval(_this.autoPlayTimer);
$sliderWrap.stop(true, true);
});
hammer.on('panmove', function(e) {
var delta = e.deltaX / $(window).width();
$sliderWrap.css('left', -(_this.curIdx + 1 - delta) * 100 / (_this.len + 2) + '%');
});
hammer.on('panend', function(e) {
if (e.deltaX / $(window).width() > 0.2) {
_this.toPrev();
} else if (e.deltaX / $(window).width() < -0.2) {
_this.toNext();
} else {
_this.move();
}
_this.autoPlay();
});
}
}
slider.init();
});
4. 示例说明
示例1:增加新的轮播图
通过修改HTML结构,将新轮播图img4.jpg添加到列表中:
<div class="slider">
<ul class="slider-wrapper">
<li class="slider-item"><img src="img1.jpg"></li>
<li class="slider-item"><img src="img2.jpg"></li>
<li class="slider-item"><img src="img3.jpg"></li>
<li class="slider-item"><img src="img4.jpg"></li>
</ul>
<ul class="slider-dots">
<li class="slider-dot"></li>
<li class="slider-dot"></li>
<li class="slider-dot"></li>
<li class="slider-dot"></li>
</ul>
</div>
然后在CSS中修改轮播图包裹元素的宽度和轮播图item的宽度为25%:
.slider .slider-wrapper {
width: 400%;
height: 100%;
position: relative;
left: -100%;
}
.slider .slider-item {
float: left;
width: 25%;
height: 100%;
position: relative;
}
最后刷新页面,可以看到新增的轮播图以及底部的小圆点已经同步更新。
示例2:关闭自动播放功能
通过注释掉轮播图对象slider对象的autoPlay()方法即可。
slider.init();
// slider.autoPlay();
然后刷新页面,可以发现轮播图不再自动播放。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS仿京东移动端手指拨动切换轮播图效果 - Python技术站