0
4つの画像のうちの1つが配列から次の画像にフェードする単純なマトリックススタイルのスライドショーを作成しています。画面上の位置に関連するインデックスは増分し、画像URLのインデックスは増分します。 3では、imagePositionをリセットして0にリセットし、imageUrlインデックスが配列の長さに達するとリセットします。jQueryが画像を修正するためにフェーディングしない
ただし、画像はその位置にすでにある画像と同じ画像でリセットされるという問題があります。私がURLをログすると、その異なっているが、私が検査するときにdomは更新されず、&のリンクは同じままである。
私はランダムインデックスを4で使用しようとしましたが、それはうまくいくように見えますが、画面上のすべてのスポットを順番に反復する必要があります。
fadeToImageが5秒ごとに呼び出され、同じ配列を渡しています。
（私は後にリファクタリングしようと、コードが反復的である知っている）
var urlArray = ["http://nerdist.com/wp-content/uploads/2016/07/EranGOTGif0007.gif", "https://jimpix.co.uk/ink/ecards/angif_octopus.gif", "http://i.imgur.com/cmefPHy.gif", "http://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1449833420.8507_ePysAs_n.jpg", "https://media.giphy.com/media/9fbYYzdf6BbQA/giphy.gif", "http://static1.squarespace.com/static/552a5cc4e4b059a56a050501/565f6b57e4b0d9b44ab87107/566024f5e4b0354e5b79dd24/1449141991793/NYCGifathon12.gif", "http://67.media.tumblr.com/50af8ed4e4afcc4530c83057db147a91/tumblr_nltc6y6pau1rx5rfmo1_1280.gif"];
setInterval(function() {
fadeToImage(urlArray);
}, 5000);
var cycled = false;
var count = 4;
var imagePosition=0;
function fadeToImage(urlArray)
{
if (cycled === false){
count = 4;
imagePosition=0;
console.log("setting first images")
$(".display-image-0").attr("style", "background:url(\"" + urlArray[0] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);");
$(".display-image-1").attr("style", "background:url(\"" + urlArray[1] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);");
$(".display-image-2").attr("style", "background:url(\"" + urlArray[2] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);");
$(".display-image-3").attr("style", "background:url(\"" + urlArray[3] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);");
cycled = true;
} else {
if (imagePosition < 4) {
console.log(count)
if (count < urlArray.length) {
console.log("image position less than 4, count < array", imagePosition, count, urlArray[count])
$(".display-image-" + imagePosition).fadeTo(1000, 0, function() {
$(".display-image-" + imagePosition).attr("style", "background:url(\"" + urlArray[count] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);");
}).fadeTo(2000, 1);
count++;
} else {
cycled = false;
}
imagePosition++;
} else {
imagePosition = 0;
if (count < urlArray.length) {
$(".display-image-" + imagePosition).fadeTo(1000, 0, function() {
$(".display-image-" + imagePosition).attr("style", "background:url(\"" + urlArray[count] + "\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);");
}).fadeTo(2000, 1);
count++;
} else {
cycled = false;
}
imagePosition++;
}
}
}.display-image-0 {
position: fixed;
left: 0px;
top: 0px;
height: 33%;
width: 50%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.display-image-1 {
position: fixed;
right: 0px;
top: 0px;
height: 33%;
width: 50%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.display-image-2 {
position: fixed;
left: 0px;
bottom: 0px;
height: 33%;
width: 50%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.display-image-3 {
position: fixed;
right: 0px;
bottom: 0px;
height: 33%;
width: 50%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="display-image-0"></div>
<div class="display-image-1"></div><div class="display-image-2"></div>
<div class="display-image-3"></div>
ここで提供される 'Run code snippet'ボタンを使用してスクリプトを実行することができません。これをJSFiddleの実行可能コードとして入れて、私たちにリンクを教えてください。 –
今すぐコードスニペットを実行できるはずです –
'count ++'だから4からUPしますか？そうですか？条件式は常に失敗するのですか？ –