套用：swappingwall.jquery.js
html:
<div class="list">
<img src="img/img1.jpg">
<img src="img/img2.jpg">
<img src="img/img3.jpg">
<img src="img/img4.jpg">
<img src="img/img5.jpg">
<img src="img/img6.jpg">
<img src="img/img7.jpg">
<img src="img/img8.jpg">
<img src="img/img9.jpg">
<img src="img/img10.jpg">
<img src="img/img11.jpg">
<img src="img/img12.jpg">
<img src="img/img13.jpg">
<img src="img/img14.jpg">
<img src="img/img15.jpg">
<img src="img/img16.jpg">
<img src="img/img17.jpg">
<img src="img/img18.jpg">
<img src="img/img19.jpg">
<img src="img/img20.jpg">
<img src="img/img21.jpg">
<img src="img/img22.jpg">
<img src="img/img23.jpg">
<img src="img/img24.jpg">
</div>
rwd js
$(document).ready(function(){
$('.list').SwappingWall({
'time': 2000,
'itemsInRow': 8,
'duration': 400,
'responsive': [
{
'breakpoint': 991,
'itemsInRow': 3,
},
{
'breakpoint': 768,
'itemsInRow': 4,
}
]
})
})
<script>
$(document).ready(function() {
//設定三個圖片操作
var OneTimeFadeCount = 3;
//設定圖片透明度 //randShowImage方法
var randShowImage = function(target) {
$(target).fadeTo(1000, 1, function() {
$(target).fadeTo(1000, 0.5);
});
};
//計時器 //1000-2000毫秒亂數重整一次
var timer = function() {
var targetIndexArray = getRandomIntArray(1, 24, OneTimeFadeCount);
for (var i = 0; i < OneTimeFadeCount; i++) {
var targetIndex = targetIndexArray[i];
randShowImage($("img")[targetIndex]);
}
setTimeout(function() {
timer();
}, getRandomInt(1000, 2000));
}
//getRandomInt方法 //取出亂數
var getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
//getRandomIntArray方法 //判斷是否重複
var getRandomIntArray = function(min, max, count) {
var result = [];
var i = 0;
while (i < count) {
var randInt = getRandomInt(min, max);
if (result.indexOf(randInt) == -1) {
result.push(randInt);
i++;
}
}
return result;
};
//hover
$("img").each(function(i) {
jQuery(this).hover(function() {
jQuery(this).fadeTo('slow', 1);
return false;
}, function() {
jQuery(this).fadeTo('slow', 0.5);
return false;
});
//一開始執行將圖片亂數設定時間變成透明度0.5
jQuery(this).fadeTo(500 + (3000 * (Math.random())), 0.5);
});
timer();
});
</script>
