jQuery_シームレススクロールホイール効果プラグインパッケージ
12081 ワード
jQueryを使用して、シームレススクロールマルチキャスト効果プラグインをカプセル化します.
効果図:
オンラインプレビュー:jQuery_LKMarqueeSlideshow
GitHubダウンロードアドレス
互換性:
プラグインパラメータの説明: speed:スクロール速度、タイプ:number. slidesPerView:同時に表示されるslideの数、タイプ:number. loopAdditionalSlides:いくつかのマルチキャスト要素をコピーして現在のマルチキャスト要素に追加した後、タイプ:number. mode:スクロール方向、変更パラメータを設定せずにデフォルトで水平スクロール、verticalに設定し、垂直スクロール. changeType:移動方向を変更し、デフォルトではクリック、「mouseenter」に設定し、マウスを切り替え方向に移動します. arrow_left:運動方向を変更し、タイプ:HTMLラベル. arrow_right:動きの方向を変更し、タイプ:HTMLラベル.
HTML
CSS
JSコール
JSパッケージカード
LKMarqueeSlideshow.js
ご注目をお待ちしております!
効果図:
オンラインプレビュー:jQuery_LKMarqueeSlideshow
GitHubダウンロードアドレス
互換性:
プラグインパラメータの説明:
HTML
"slide_container slide_demo">
"slide_wrapper">
"slide_item" style="background-color: #4390ee;">item1
"slide_item" style="background-color: #ff8604;">item2
"slide_item" style="background-color: #49a430;">item3
"arrow">
"arrow_left"><<
"arrow_right">>>
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コール
"jquery-1.8.3.min.js"</span>>
"LKMarqueeSlideshow.js"</span>>
$(<span class="hljs-function"><span class="hljs-title">function</span></span>() {
$(<span class="hljs-string">".slide_demo"</span>).LKMarqueeSlideshow({
// speed: 2,
slidesPerView: 1,
loopAdditionalSlides: 1,
// mode: <span class="hljs-string">"vertical"</span>,
changeType: <span class="hljs-string">"mouseenter"</span>,
arrow_left: <span class="hljs-string">".arrow_left"</span>,
arrow_right: <span class="hljs-string">".arrow_right"</span>
});
});
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);
ご注目をお待ちしております!