使用 jQuery 封装一个无缝滚动轮播效果插件。
效果图：
基础轮播
列表轮播
垂直轮播
在线预览：jQuery_LKMarqueeSlideshow
兼容性：
兼容性
插件参数说明：
- speed：滚动速度，类型：number。
- slidesPerView：同时显示的 slide 数量，类型：number。
- loopAdditionalSlides：复制若干份轮播元素追加到当前轮播元素之后，类型：number。
- mode：滚动方向，不设置改参数默认为水平滚动，设置为 “vertical”，垂直滚动。
- changeType：改变运动方向方式，默认为点击，设置为 “mouseenter”，鼠标移入切换方向。
- arrow_left：改变运动方向，类型：HTML 标签。
- arrow_right：改变运动方向，类型：HTML 标签。
HTML
<div class="slide_container slide_demo">
<div class="slide_wrapper">
<div class="slide_item" style="background-color: #4390ee;">item1</div>
<div class="slide_item" style="background-color: #ff8604;">item2</div>
<div class="slide_item" style="background-color: #49a430;">item3</div>
</div>
<div class="arrow">
<i class="arrow_left"><<</i>
<i class="arrow_right">>></i>
</div>
</div>
CSS
.slide_container { position: relative; overflow: hidden; width: 600px; margin: 20px auto; }
.slide_wrapper { position: absolute; top: 0; left: 0; overflow: hidden; }
.slide_item { font-size: 24px; line-height: 250px; overflow: hidden; height: 250px; text-align: center; }
.arrow i { position: absolute; z-index: 1; top: 50%; display: inline-block; cursor: pointer; }
.arrow .arrow_left { left: 20px; }
.arrow .arrow_right { right: 20px; }
JS调用
<script src="jquery-1.8.3.min.js"></script>
<script src="LKMarqueeSlideshow.js"></script>
<script>
$(function() {
$(".slide_demo").LKMarqueeSlideshow({
// speed: 2,
slidesPerView: 1,
loopAdditionalSlides: 1,
// mode: "vertical",
changeType: "mouseenter",
arrow_left: ".arrow_left",
arrow_right: ".arrow_right"
});
});
</script>
JS封装插件
LKMarqueeSlideshow.js
/**
* Title: LKMarqueeSlideshow
* Version: 1.1.1
* Description: plugin
* Author: LiuZhenghe
* Date: 2019-01-10
*/
(function($) {
// What does the LKMarqueeSlideshow plugin do?
$.fn.LKMarqueeSlideshow = function(options) {
if (!this.length) {
return this;
};
var opts = $.extend(true, {}, $.fn.LKMarqueeSlideshow.defaults, options);
this.each(function() {
var $this = $(this);
var slide_container = $(this); // 轮播容器
var slide_wrapper = $(this).find('.slide_wrapper'); // 滚动区域
var slide_item = $(this).find('.slide_item'); // 轮播元素
var item_length = slide_item.length; // 轮播元素个数
var changeType = opts.changeType; // 改变运动方向方式
var arrow_left = $(opts.arrow_left); // 左箭头
var arrow_right = $(opts.arrow_right); // 右箭头
var speed = opts.speed; // 速度
var timer; // 定时器
var mode = opts.mode; // 滚动方向
var slidesPerView = opts.slidesPerView; // 同时显示的 slide 数量
var loopAdditionalSlides = opts.loopAdditionalSlides; // 复制若干份轮播元素追加到当前轮播元素之后
// 判断是否传入属性 loopAdditionalSlides ，如果没有传入，则默认属性值为 1，也就是克隆出一份轮播元素到当前轮播元素之后。
if (loopAdditionalSlides == null) {
loopAdditionalSlides = 1;
} else {
loopAdditionalSlides = loopAdditionalSlides;
};
// 判断是否传入属性 slidesPerView，如果没有传入，则默认属性值为 1。
if (slidesPerView == null) {
slidesPerView = 1;
} else {
slidesPerView = slidesPerView;
};
// 拷贝出若干份轮播添加到当前轮播元素后边，默认是一份。
for (var i = 1; i <= loopAdditionalSlides; i++) {
slide_item.clone().appendTo(slide_wrapper);
}
slide_item = $(this).find('.slide_item');
// 初始化轮播容器的高，轮播元素、轮播容器的宽、。
var slide_height = slide_item[0].clientHeight;
slide_container.css('height', slide_height);
var container_width = slide_container[0].clientWidth;
var container_height = slide_container[0].clientHeight;
// mode 属性判断：
if (mode == "vertical") {
// 当 mode 值为 vertical 时，轮播垂直滚动。
slide_item.css({
'width': container_width,
'height': container_height / slidesPerView
});
// 初始化滚动区域的高。
var wrapper_height = 0;
for (var i = 0; i < slide_item.length; i++) {
wrapper_height += slide_item[i].clientHeight;
};
slide_wrapper.css('height', wrapper_height);
} else {
// 当不设置 mode 属性时，默认为水平滚动，设置轮播元素向左浮动。
slide_item.css({
'width': container_width / slidesPerView,
'float': 'left'
});
// 初始化滚动区域的宽。
var wrapper_width = 0;
for (var i = 0; i < slide_item.length; i++) {
wrapper_width += slide_item[i].clientWidth;
};
slide_wrapper.css('width', wrapper_width);
};
// 滚动主方法：
function moveFun() {
// 垂直滚动方法：
if (mode == "vertical") {
var wrapper_top = slide_wrapper[0].offsetTop; // 滚动区域向上偏移量
var wrapper_height = slide_wrapper[0].offsetHeight; // 滚动区域高
// 当轮播向上滚动的偏移量小于滚动区域一半的高度时，立刻定位到初始化位置。
if (wrapper_top < -(slide_wrapper[0].offsetHeight / (loopAdditionalSlides + 1))) {
slide_wrapper[0].style.top = 0;
} else if (wrapper_top > 0) {
// 当滚动区域向上偏移量大于0时（也就是向下滚动时），将滚动区域定位到滚动区域一半的位置上，这样就实现了无分滚动效果。
slide_wrapper[0].style.top = -(wrapper_height / (loopAdditionalSlides + 1)) + "px";
};
// 滚动元素 top 的值 = 滚动区域向上的偏移量 + speed，配合下边的定时器方法，偏移量不断增加，实现滚动效果。
slide_wrapper[0].style.top = slide_wrapper[0].offsetTop - speed + "px";
} else {
// 水平滚动方法：
var wrapper_left = slide_wrapper[0].offsetLeft; // 滚动区域向左偏移量
var wrapper_width = slide_wrapper[0].offsetWidth; // 滚动区域宽
// 当轮播向左滚动的偏移量小于滚动区域一半的宽度时，立刻定位到初始化位置。
if (wrapper_left < -(slide_wrapper[0].offsetWidth / (loopAdditionalSlides + 1))) {
slide_wrapper[0].style.left = 0;
} else if (wrapper_left > 0) {
// 当滚动区域向左偏移量大于0时（也就是向右滚动时），将滚动区域定位到滚动区域一半的位置上，这样就实现了无分滚动效果。
slide_wrapper[0].style.left = -(wrapper_width / (loopAdditionalSlides + 1)) + "px";
};
// 滚动元素 left 的值 = 滚动区域向左的偏移量 + speed，配合下边的定时器方法，偏移量不断增加，实现滚动效果。
slide_wrapper[0].style.left = slide_wrapper[0].offsetLeft - speed + "px";
};
};
// 每 0.02s 执行一次移动效果，实现匀速运动。
timer = setInterval(moveFun, 20);
// 鼠标移入滚动区域时停止滚动
slide_container.mouseenter(function(event) {
event.preventDefault();
clearInterval(timer);
});
// 鼠标移出滚动区域时继续滚动
slide_container.mouseleave(function(event) {
event.preventDefault();
timer = setInterval(moveFun, 20);
});
// 判断当轮播元素只有一个的时候，清除定时器。
if (slide_item.length / 2 == 1) {
clearInterval(timer);
};
// 鼠标左右切换效果：
// 当 changeType 传入的是"mouseenter"，鼠标移入发生切换。
// 当 changeType 不穿入任何参数时，鼠标点击发生切换。
var speed_new = opts.speed;
if (changeType == "mouseenter") {
arrow_left.mouseenter(function(event) {
event.preventDefault();
speed = speed_new;
});
arrow_right.mouseenter(function(event) {
event.preventDefault();
speed = -speed_new;
});
} else {
arrow_left.click(function(event) {
event.preventDefault();
speed = speed_new;
});
arrow_right.click(function(event) {
event.preventDefault();
speed = -speed_new;
});
};
});
return this;
};
// default options
$.fn.LKMarqueeSlideshow.defaults = {
speed: null, // 速度
slidesPerView: null, // 同时显示的 slide 数量
loopAdditionalSlides: null, // 复制若干份轮播元素追加到当前轮播元素之后
mode: null, // 滚动方向
changeType: null, // 改变运动方向方式
arrow_left: null, // 左箭头
arrow_right: null // 右箭头
};
})(jQuery);
网友评论