Han Xuedong カルーセルの JS 小さなデモの写真とテキストの例

りー りー

韩雪冬网站效果 - 妙味课堂 - www.miaov.com DD_belatedPNG.fix('span');

素晴らしい教室 - www.miaov.com

/*初期幅*/ // 関数の自己実行書き込みメソッドを使用して、グローバルな汚染を防ぎます (function(){ var picList = document.querySelectorAll('.picList>li'); for (var i = 0; i [0] var img = picList[i].getElementsByTagName("img ")[0]; [i],"幅",img. width); img.style.width = "100%"; } })(); /* 左ボタンのマウスの移動と移動のアニメーション*/ (function( ){ // prev 内の要素はそれ自体よりも高いレベルにあり、その上に構築されるため、onmouseover または onmouseout を prev に追加すると、実際にはマウスは prev 上でまったく移動しなくなるため、干渉を防ぐためにより高いレベルの prevBtn を追加します、 nextBtn にも同じことが当てはまります var prevBtn = document.querySelector('.prev_div'); var prev = document.querySelector('.prev'); var prevSpan = prev.querySelectorAll('span'); prevBtn .onmouseover = function(){ startMove({時間: type: "ease Both" }); startMove({ EL: Prevspan [0], Target: { Opacity: 1, left: 12 }、 時間：300、 タイプ： "easeboth" }）; ]、}）;は、「s」を使用して「s」を使用して「s」を使用して「s」を使用して 's' 'を使用します。 時間: 300, タイプ: "Ease Both" }); }, 時間: 300, 時間: "ease Both" =document .querySelector('.next_div'); var next = document.querySelector('. next'); var nextSpan = next.querySelectorAll('span'); nextBtn.onmouseover = function(){ startMove({ el: nextSpan[1], target: { right: 12 }, time: 300, type: "ease Both" }); startMove({ el: nextSpan[0], target: { opacity:1, right: 12 }, time: 300, type: "ease Both" }); startMove({ el: nextSpan[2], target: { opacity:1 , right: 53 }, time: 300, type: "ease Both" }); }; nextBtn.onmouseout = function(){ startMove({ el: nextSpan[1], target: { right: 0 }, time: 300, type: "ease Both" }); startMove({ el: nextSpan[0], target: { opacity:0, right: 0 } , time: 300, type: "ease Both" }); startMove({ el: nextSpan[2], target: { 不透明度:0, 右: 65 }, 時間: 300, type: "ease Both" }); }; })(); /* 点击切换アニメーション画 */ (function(){ var Wrap = document.querySelector('#automatic'); var prevBtn = document.querySelector('.prev_div'); var nextBtn = document.querySelector('.next_div'); var picList = document.querySelectorAll('.picList>li'); var line = document.querySelector( '.line'); var attrs = []; var timer = 0; for(var i = 0; i // 先给li 数组中对应的空间内に储它の各项属性データを保存するためのオブジェクトを追加します attrs[i] = {}; attrs[i].width = css(picList[ i],"width"); attrs[i].left = css(picList[i],"left"); attrs[i].top = css(picList[i],"top"); attrs [i].opacity = css(picList[i],"opacity"); attrs[i].zIndex = css(picList[i],"zIndex"); } prevBtn.onclick = function(){ attrs.push(attrs.shift()); setStyle(); }; nextBtn.onclick = function(){ attrs.unshift(attrs.pop()); setStyle(); }; 機能setStyle(){ css(line,"opacity",0); for(var i = 0; i // css(picList[i],"left",attrs[私].左); // css(picList[i],"top",attrs[i].top); // css(picList[i],"opacity",attrs[i].opacity); // css(picList[ i],"zIndex",attrs[i].zIndex); // 让图片提前显表示再变化样式 css(picList[i],"zIndex",attrs[i].zIndex); startMove({ el: picList[i], target: attrs[i], time: 500, type: "easeOut", callBack: function(){ startMove({ el:line, target:{opacity: 1}, time: 200, type: "easeOut", callBack:function(){ console.log(1); }

} } timer = setInterval (function(){ nextBtn.onclick(); },3000); wrap.onmouseover = function(){ clearInterval(timer); } wrap.onmouseout = function(){ タイマー = setInterval(関数(){ nextBtn.onclick(); },3000); } })();

Han Xuedong カルーセルの JS 小さなデモの写真とテキストの例

関連記事