圖片牆 js

套用：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>