封装轮播图(pc端)
function banAnimate (target) {
var banner_items = target.children('ul').children();
var banner_control = target.children('ol');
var banner_control_items = banner_control.children();
var all_len = banner_control.children().length;
banner_control_items.mouseover(function() {
var index = $(this).index();
banChange(index);
})
var bannerTimer = null, currentIndex = 0;
bannerTimer = setInterval(function () {
currentIndex = ++currentIndex > all_len-1 ? 0 : currentIndex;
banChange(currentIndex)
}, 2000)
function banChange (index) {
banner_items.eq(index).show().siblings().hide();
banner_control_items.eq(index).addClass('active').siblings().removeClass('active');
}
target.hover(function () {
clearTimeout(bannerTimer);
}, function () {
bannerTimer = setInterval(function () {
currentIndex = ++currentIndex > all_len - 1 ? 0 : currentIndex;
banChange(currentIndex)
}, 2000)
})
}
HTML结构
<div class="banner_pc">
<ul></ul>
<ol></ol>
</div>
封装轮播图(移动端)
function banAnimateMobile (target) {
var banner_wrapper = target.children('ul');
var banner_control = target.children('ol');
var banner_control_items = banner_control.children();
var all_len = banner_control.children().length;
var bannerTimer = null,
currentIndex = 0;
controlIndex = 0;
bannerTimer = setInterval(function () {
currentIndex++;
if (currentIndex > all_len) {
banner_wrapper.css('marginLeft', 0);
currentIndex = 1;
}
controlIndex = ++controlIndex > all_len - 1 ? 0 : controlIndex;
banChange(currentIndex)
}, 2000)
function banChange(index) {
banner_wrapper.animate({
marginLeft: -index*16 + 'rem'
}, 'fast')
banner_control_items.eq(controlIndex).addClass('active').siblings().removeClass('active');
}
function slideAnimate() {
var startX = 0;
var endX = 0;
target.on('touchstart', function (e) {
e.preventDefault();
if (e.originalEvent.changedTouches.length == 1) {
var touch = e.originalEvent.changedTouches[0];
startX = touch.screenX;
console.log("startX"+startX)
}
clearInterval(bannerTimer);
});
target.on('touchmove', function (e) {
e.preventDefault();
if (e.originalEvent.changedTouches.length == 1) {
var touch = e.originalEvent.changedTouches[0];
endX = touch.screenX;
console.log("endX" + endX)
}
});
target.on('touchend', function (e) {
console.log(endX+"----"+startX);
if (endX > startX) {
--currentIndex;
if (currentIndex < 0) {
banner_wrapper.css('marginLeft', -16*all_len + 'rem');
currentIndex = all_len-1;
}
controlIndex = --controlIndex < 0 ? all_len - 1 : controlIndex;
banChange(currentIndex)
console.log('右滑')
} else {
console.log('左滑');
currentIndex++;
if (currentIndex > all_len) {
banner_wrapper.css('marginLeft', 0);
currentIndex = 1;
}
controlIndex = ++controlIndex > all_len - 1 ? 0 : controlIndex;
banChange(currentIndex)
}
bannerTimer = setInterval(function () {
currentIndex++;
if (currentIndex > all_len) {
banner_wrapper.css('marginLeft', 0);
currentIndex = 1;
}
controlIndex = ++controlIndex > all_len - 1 ? 0 : controlIndex;
banChange(currentIndex)
}, 2000)
});
}
slideAnimate();
}
banAnimateMobile($('.banner-mobile'));