介绍
轮播图组件
项目地址
GitHub - stevenwanderski/bxslider-4: Responsive jQuery content slider
基本使用方式
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
<ul class="bxslider">
<li><img src="images/pic1.jpg" /></li>
<li><img src="images/pic2.jpg" /></li>
<li><img src="images/pic3.jpg" /></li>
<li><img src="images/pic1.jpg" /></li>
<li><img src="images/pic2.jpg" /></li>
</ul>
<!-- jQuery library -->
<script src="jquery-3.1.1.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'horizontal',
moveSlides: 1,
slideMargin: 40,
infiniteLoop: true,
slideWidth: 660,
minSlides: 3,
maxSlides: 3,
speed: 800,
});
});
</script>
改造1，两边小中间大的轮播效果
var documentWidth = $(document).width();
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
moveSlides: 1,
slideMargin: 0,
infiniteLoop: true,
slideWidth: 400,
minSlides: 1,
maxSlides: 3,
speed: 500,
pager:false,//下面的小点
auto: true,
autoStart: true,
autoHover: true,
onSliderLoad(currentIndex) {
if (documentWidth <= 768) { return; }
// 第一个的时候，需要将第二个放大
$('.bxslider>li').find("img").animate({ width: "300px" });
// boslider loop的时候会在前后加上123的记录，所以如果是显示3个，那么第4个是第一个，第5个就是中间的那个
// 其中bx-clone从0开始，那么中间那个就是1，4个
$('.bxslider>li').eq(4).find("img").animate({ width: "400px" });
$('.bxslider').children(".bx-clone").eq(1).find("img").animate({ width: "400px" });
$('.bxslider').children(".bx-clone").eq(4).find("img").animate({ width: "400px" });
},
onSlideBefore($slideElement, oldIndex, newIndex) {
//oldIndex 是当前第一个
//newIndex 即将要展示的第一个
if (documentWidth <= 768) { return;}
console.log($slideElement, $slideElement.prevObject.length);
console.log(newIndex);
$slideElement.prevObject.eq(oldIndex + 1).find("img").animate({ width: "300px" });
if ($slideElement.prevObject.length == newIndex + 1) {
// 最后一个的时候，需要将第一个放大
$slideElement.prevObject.eq(0).find("img").animate({ width: "400px" });
$('.bxslider').children(".bx-clone").eq(0).find("img").animate({ width: "400px" });
$('.bxslider').children(".bx-clone").eq(3).find("img").animate({ width: "400px" });
$('.bxslider>li').eq(3).find("img").animate({ width: "400px" });
$('.bxslider>li').eq(4).find("img").animate({ width: "300px" });
$('.bxslider').children(".bx-clone").eq(1).find("img").animate({ width: "300px" });
$('.bxslider').children(".bx-clone").eq(4).find("img").animate({ width: "300px" });
}
else if (newIndex == 0) {
// 第一个的时候，需要将第二个放大
$slideElement.prevObject.eq(0).find("img").animate({ width: "300px" });
$('.bxslider>li').eq(3).find("img").animate({ width: "300px" });
$('.bxslider').children(".bx-clone").eq(0).find("img").animate({ width: "300px" });
$('.bxslider').children(".bx-clone").eq(3).find("img").animate({ width: "300px" });
$slideElement.prevObject.eq(1).find("img").animate({ width: "400px" });
$('.bxslider>li').eq(4).find("img").animate({ width: "400px" });
$('.bxslider').children(".bx-clone").eq(1).find("img").animate({ width: "400px" });
$('.bxslider').children(".bx-clone").eq(4).find("img").animate({ width: "400px" });
}
else {
$('.bxslider>li').eq(3).find("img").animate({ width: "300px" });
$('.bxslider').children(".bx-clone").eq(0).find("img").animate({ width: "300px" });
$('.bxslider').children(".bx-clone").eq(3).find("img").animate({ width: "300px" });
$slideElement.prevObject.eq(newIndex+1).find("img").animate({ width: "400px" });
}
}
});
BUG1：手机模式下，无法上下触摸拖动的问题
解决办法：
将下面代码替换原有代码相对于的代码：
var onTouchStart = function(e) {
// watch only for left mouse, touch contact and pen contact
// touchstart event object doesn`t have button property
if (e.type !== 'touchstart' && e.button !== 0) {
return;
}
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){ } else { e.preventDefault(); }
});
//disable slider controls while user is interacting with slides to avoid slider freeze that happens on touch devices when a slide swipe happens immediately after interacting with slider controls
slider.controls.el.addClass('disabled');
if (slider.working) {
slider.controls.el.removeClass('disabled');
} else {
// record the original position when touch starts
slider.touch.originalPos = el.position();
var orig = e.originalEvent,
touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig];
var chromePointerEvents = typeof PointerEvent === 'function';
if (chromePointerEvents) {
if (orig.pointerId === undefined) {
return;
}
}
// record the starting touch x, y coordinates
slider.touch.start.x = touchPoints[0].pageX;
slider.touch.start.y = touchPoints[0].pageY;
if (slider.viewport.get(0).setPointerCapture) {
slider.pointerId = orig.pointerId;
slider.viewport.get(0).setPointerCapture(slider.pointerId);
}
// store original event data for click fixation
slider.originalClickTarget = orig.originalTarget || orig.target;
slider.originalClickButton = orig.button;
slider.originalClickButtons = orig.buttons;
slider.originalEventType = orig.type;
// at this moment we don`t know what it is click or swipe
slider.hasMove = false;
// on a "touchmove" event to the viewport
slider.viewport.on('touchmove MSPointerMove pointermove', onTouchMove);
// on a "touchend" event to the viewport
slider.viewport.on('touchend MSPointerUp pointerup', onTouchEnd);
slider.viewport.on('MSPointerCancel pointercancel', onPointerCancel);
}
};
站点公众号