[ crossSlide ] 設置例

画像はこちらで、ご確認下さい … 

サントリービール ザ・プレミアム・モルツ
竹内結子 「ぶっちゃけ」篇
中元篇は、他にも3篇あります。
「親父キャラ」篇 ○ 「小声」篇 ○ 「いただく側」篇」
どれも、ほのぼのして楽しい。。。
《 今回の小技 》
 ・ 画像のスライド : jQuery (cross slide)
  Download した jquery.cross_slide.jp でトラブル発生
  catch ステートメントでは適用されますが、throw ステートメントでは適用されません。
 ・ ハートなどの記号「♥♡♣♦♠」の入力方法

《 サントリーCM 》
 ・ サントリー 「角」 CM
 ・ サントリー 「月鏡グリーン」 CM

《 画像をフェードし、残像を残しながら自動切替する方法 》
 [ crossSlide ] 設置例

$(function() {
$('#test2').crossSlide({
sleep: 2, //in sec
fade: 1 //in sec
},
[
{ src: 'sample1.jpg' },
{ src: 'sample2.jpg' },
{ src: 'sample3.jpg' }
]);
});

 jquery.cross_slide.jp でトラブったので別の方法を探してみた。

 (1) 一定間隔で画像を変更 → フィルターを使う方法(Firefox,chrome では動作しない)

var img = "sample1.jpg,sample2.jpg,sample3.jpg";
var imgs = img.split(",");
var i=0;
var pic = new Array();
for(cnt=0; cntpic[cnt] = new Image();
pic[cnt].src = imgs[cnt];
}
function sulaidoImg1()
{
i++; i%=imgs.length;
imgFil1.filters.blendTrans.Apply();
imgFil1.src = pic[i].src;
imgFil1.filters.blendTrans.Play();
}

 (2) jQuery を使ったシンプルなスライドショー → jQuery の slides.js を使う方法

$(function() {
$('#slideshow').Slides({
images : [
'sample1.jpg' ,
'sample2.jpg' ,
'sample3.jpg'
],
pause : 6000,
fade : 2000,
wait : 5000
});
});

 (3) A Simple jQuery Slideshow → 画像を時間差で表示する方法
    只、表示時間の調整が上手く出来なかった。

function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 4000 );
});

関連記事
  関連商品のご紹介
【スポンサーリンク】

最終更新日時: 2019年02月22日(金)01:01:13
ブログパーツ

Comment 0

There are no comments yet.

Leave a comment