ローテーション
11893 ワード
一、マルチキャストの実現原理と抽象的にどのような関数(orインタフェース)を使用しますか?マルチキャストの実現原理 は、表示する必要がある画像を同じ行に配置します. は、ウィンドウの外の領域が非表示になる可視化ウィンドウを作成します. 最初の画像の前に最後の画像要素をクローンし、最後の画像の後ろに最初の要素をクローンします. jQueryアニメーションおよび位置決めにより無限ループのマルチキャストを実現する. 抽象化された関数 play(playPre()、playNext()) setBullet() (下の横線または画像のサムネイルをクリックして再生)
二、左右スクロール無限サイクルマルチキャスト効果を実現する.
三、グラデーションマルチキャスト効果を実現する例
二、左右スクロール無限サイクルマルチキャスト効果を実現する.
- 
- 
- 
- 
<
>
var $imgCt = $('.rotation .img-ct'),
$slide = $('.slide'),
$btnPre = $('.rotation .btn-pre'),
$btnNext = $('.rotation .btn-next');
var imgLen = $imgCt.children().length; // 4
var key = 0;
var isAnimate = false;
var $firstImg = $imgCt.find('li').first(),
$lastImg = $imgCt.find('li').last();
$imgCt.append($firstImg.clone());
$imgCt.prepend($lastImg.clone());
$imgCt.width((imgLen+2)*$firstImg.width());
$imgCt.css('left', 0-$firstImg.width());
//
$btnPre.on('click', function(e) {
e.preventDefault();
playPre();
// console.log(key);
})
$btnNext.on('click', function(e) {
e.preventDefault();
playNext();
// console.log(key);
})
//
$slide.find('li').on('click', function(e) {
e.preventDefault();
var clickIndex = $(this).index();
if(clickIndex < key) {
playPre(clickIndex);
}else if(clickIndex > key){
playNext(clickIndex);
}else{
return;
}
})
function playPre(index) {
if(isAnimate) {
return;
}
isAnimate = true;
switch (typeof index)
{
case 'undefined':
$imgCt.animate({
left: '+=600px', // '+= 600px'
}, function() {
key--;
if(key < 0) {
$imgCt.css('left', 0-(imgLen*$firstImg.width()));
key = imgLen -1;
}
setSlide();
isAnimate = false;
})
break;
case 'number':
clickSlide(index);
break;
}
}
function playNext(index) {
if(isAnimate) {
return;
}
isAnimate = true;
switch (typeof index)
{
case 'undefined':
$imgCt.animate({
left: '-=600px',
}, function() {
key ++;
if(key == imgLen) {
$imgCt.css('left', '-600px');
key = 0;
}
setSlide();
isAnimate = false;
})
break;
case 'number':
clickSlide(index);
break;
}
// setSlide(); ， ，key
// isAnimate = false; ！！！！！ false
}
function clickSlide(index) {
var leftOffset= -(index+1)*$firstImg.width();
$imgCt.animate({
'left': leftOffset,
}, function() {
key = index;
setSlide();
isAnimate = false;
})
}
function setSlide() {
$('.rotation .slide').find('li').removeClass('active').eq(key).addClass('active');
console.log('key:' + key);
}
// ， ， 。
三、グラデーションマルチキャスト効果を実現する例
- 
- 
- 
- 
- 
- 
- 
- 
<
>
- 
- 
- 
- 
- 
- 
- 
- 
var $carousel = $('.carousel .img-ct').children(),
$btnBefore = $('.btn-before'),
$btnAfter = $('.btn-after'),
$thubms = $('.thubms .sample').children(),
thubmsNumber = $('.thubms .sample').children().length;
var currentKey = 0;
var playing = false;
console.log($carousel);
play(0);
autoPlay();
$btnBefore.on('click', playBefore);
$btnAfter.on('click', playAfter);
$thubms.on('click', function() {
var clickIndex = $(this).index();
play(clickIndex);
})
function autoPlay() {
var beginPlay = setInterval("playAfter()", 3000);
}
function playBefore() {
play((thubmsNumber + currentKey - 1)%thubmsNumber);
}
function playAfter() {
console.log(currentKey+1);
console.log(thubmsNumber);
console.log((currentKey+1)%thubmsNumber);
play((currentKey+1)%thubmsNumber);
console.log(currentKey);
}
function play(index) {
// if(playing) return;
console.log(index);
if(!playing) {
playing = true;
$carousel.eq(currentKey).fadeOut(400);
$carousel.eq(index).fadeIn(400, function() {
playing = false; //
});
currentKey = index;
setSample(index, currentKey);
}
}
function setSample(currentKey) {
console.log(currentKey);
$thubms.removeClass('selected').eq(currentKey).addClass('selected');
}