JSは無限ホイール放送を実現し、後退効果がない。
本論文の例では、JSが無限ループバック無しを実現するための具体的なコードを共有しました。参考にしてください。具体的な内容は以下の通りです。
原理:移動前にトランジット効果を設定し、遷移効果をクリアし、最後の画像に到達した時にトランジット効果をクリアした後、トランジット効果をtranslateX(0)
またjqの引用が必要です。
HTML:
第一歩は私たちがulのすべてのliの前と後ろに同じli配列をコピーするべきです。
効果図:
元のli集合の前後に同じ集合が追加された後、slade−containerはprepend(li集合)を示した。
slade-containerに一番中間のli集合を表示させるために、ul:magin-leftとmagin-rightを負の値に設定します。大きさはliセットの幅です。
このようにulの実際の幅は元の三倍です。slade-containerは最も原始的なli集合を示しています。
具体的な処理関数を作成します。
原理:移動前にトランジット効果を設定し、遷移効果をクリアし、最後の画像に到達した時にトランジット効果をクリアした後、トランジット効果をtranslateX(0)
またjqの引用が必要です。
HTML:
<div class="slide-container" view-count="3">
<ul>
<li>
<img src="images/women/15444293310974910.jpg" alt=""/>
</li>
<li>
<img src="images/women/15444293312083674.jpg" alt=""/>
</li>
<li>
<img src="images/women/15444293313734437.jpg" alt=""/>
</li>
<li>
<img src="images/women/15444293315979953.jpg" alt=""/>
</li>
<li>
<img src="images/women/15444293316955485.jpg" alt=""/>
</li>
<li>
<img src="images/women/15444293317767707.jpg" alt=""/>
</li>
</ul>
</div>
CSS:
.slide-container {
max-width: 1230px;
margin: auto;
overflow: hidden;
}
.slide-container li {
float: left;
}
.slide-container img {
width: 100%;
}
JS:第一歩は私たちがulのすべてのliの前と後ろに同じli配列をコピーするべきです。
効果図:
元のli集合の前後に同じ集合が追加された後、slade−containerはprepend(li集合)を示した。
slade-containerに一番中間のli集合を表示させるために、ul:magin-leftとmagin-rightを負の値に設定します。大きさはliセットの幅です。
このようにulの実際の幅は元の三倍です。slade-containerは最も原始的なli集合を示しています。
let orgLen, canMove, curLi, curLen,
slider = null,
interval = null,
curImgIndex = 0;
function initSlider() {
let orgLiArray = document.querySelectorAll('.slide-container li');
orgLen = orgLiArray.length;
canMove = true;
slider = $('.slide-container');
addLi();
setStyle();
// li
function addLi() {
for (let i = 0; i < orgLen; i++) {
let preLi = orgLiArray[orgLen - i - 1].cloneNode(true);
let apLi = orgLiArray[i].cloneNode(true);
document.querySelector('.slide-container ul').prepend(preLi);
document.querySelector('.slide-container ul').append(apLi);
}
}
function setStyle() {
curLi = slider.find('li');
curLen = curLi.length;
curLi.css({
'width': 'calc(' + 100 / curLen + '% - 10px)', // li
'margin': '0 5px'
});
// li ul ul
slider.find('ul').css({
'width': curLen / slider.attr('view-count') * 100 + '%',
});
// width li
// margin-left margin-right li slide-container
let width = document.defaultView.getComputedStyle(curLi[0]).width.match(/\d*\W\d/g);
width = (parseFloat(width) + 10) * orgLen;
slider.find('ul').css({
'margin-left': '-' + width + 'px',
'margin-right': '-' + width + 'px',
});
}
}
/**
*
*
*
* @param imgIndex
*/
function move(imgIndex) {
canMove = false; //
clearInterval(interval); //
slider.find('ul').css({
'transition': 'all 0.5s linear'
});
setTimeout(function () { //
slider.find('ul').css({
'transform': 'translateX( ' + 100 / curLen * -imgIndex + '% )',
});
setTimeout(function () { //
slider.find('ul').css({
'transition': '',
});
setTimeout(function () {
if (Math.abs(imgIndex) >= orgLen) { //
curImgIndex = 0;
slider.find('ul').css({
'transform': 'translateX(0)'
});
}
canMove = true;
startInterval();
}, 20);
}, 500);
}, 20);
}
function startInterval() {
interval = setInterval(function () { //
curImgIndex++;
move(curImgIndex);
},2000);
}
initSlider();
startInterval();
マウスホイールに加えて効果を実現し、ホイールで画像を切り替えることができます。具体的な処理関数を作成します。
//
function wheel(event) {
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) { //IE、chrome wheelDelta, “ 120”
delta = event.wheelDelta / 120;
if (window.opera)
// IE、chrome ,FF , ,
delta = -delta;
} else if (event.detail) { //FF detail, “ 3”
delta = -event.detail / 3;
}
if (delta) {
handle(delta);
//
event.preventDefault() && event.stopPropagation();
}
}
//
function handle(delta) {
//
if (delta < 0 && canMove) {
curImgIndex++;
move(curImgIndex);
} else if (delta > 0 && canMove) { //
curImgIndex--;
move(curImgIndex);
}
}
その後、ローラー転がりイベントをバインドします。
//
if (window.addEventListener) //FF,
slider.get(0).addEventListener('DOMMouseScroll', wheel, false);
slider.get(0).onmousewheel = wheel; //W3C
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。