画像のランダム切り替え(未完成)
配列の中に画像のパス、リンク、あと初期に表示させるかどうかのプロパティ記載して、読み込み後は一定時間ごとにランダムで画像を切り替えるコードをjsとjqueryで実装してみました。まだ未完成ですが備忘録として載せます。
html**
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ランダム画像切り替え</title> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <link rel="stylesheet" href="css/style.css"> <script src="js/random.js"></script> </head> <body> <ul id="rcl"> <!-- カラー画像格納場所 --> </ul> <!-- #rcl --> </body> </html>
CSS**
* { margin: 0; padding: 0; } ul { list-style: none; } a { display: block; height: 100%; } a:hover { opacity: 0.7; } ul#rcl li { width: 100px; height: 100px; margin: 10px; display: none; -webkit-transition: 1s; transition: 1s; opacity: 0; } ul#rcl li.active { display: inline-block; animation-duration: 1s; animation-name: fade-in; -moz-animation-duration: 1s; -moz-animation-name: fade-in; -webkit-animation-duration: 1s; -webkit-animation-name: fade-in; opacity: 1.0; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @-webkit-keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /*# sourceMappingURL=style.css.map */
JS**
document.addEventListener("DOMContentLoaded", function(event) { console.log("動いている") const randombox = document.querySelector('#rcl') // console.log(randombox) let imgList = [ {imgSrc:'01.jpg', imgLink:'01', state:true }, {imgSrc:'02.jpg', imgLink:'02', state:true }, {imgSrc:'03.jpg', imgLink:'03', state:true }, {imgSrc:'04.jpg', imgLink:'04', state:true }, {imgSrc:'05.jpg', imgLink:'05', state:true }, {imgSrc:'06.jpg', imgLink:'06', state:true }, {imgSrc:'07.jpg', imgLink:'07', state:true }, {imgSrc:'08.jpg', imgLink:'08', state:true }, {imgSrc:'09.jpg', imgLink:'09', state:true }, {imgSrc:'10.jpg', imgLink:'10', state:false } ] // 要素にimgListの数ぶんのliタグを入れる function setLi(array) { array.forEach( function( value ) { let output; output = `<li style="background-image: url('img/${value.imgSrc}');"><a href="${value.imgLink}"></a></li>` // console.log(output) $(randombox).append(output) }) } function setCnts(array) { array.forEach( function( value, index ) { let b = index + 1 let d = `li:nth-child(${b})` let url = value.array // console.log(b) if(value.state === true){ $(d).addClass('active') // $(d).find('a').attr('href',url) }else{ $(d).removeClass('active') // $(d).find('a').attr('href','') } }) } let result = new Promise(function(resolve) { resolve(setLi(imgList)); }) result.then( function(){ setCnts(imgList) }) function numRand() { return Math.floor(Math.random() * imgList.length) } function makeFalseTrue(array){ const num = numRand() if(array[num].state == true ){ makeFalseTrue(array) }else{ array[num].state = true } } function makeTrueFalse(array){ const num = numRand() if(array[num].state == false ){ makeTrueFalse(array) }else{ array[num].state = false } } setInterval(() => { makeFalseTrue(imgList) makeTrueFalse(imgList) setCnts(imgList) console.log('OK') }, 5000); })