CSS
#jsnap {
width:100%;
display:flex;
overflow-x:hidden;
}
#jsnap > div {
height:100%;
width:100%;
flex:none;
display:flex;
align-items:center;
justify-content:center;
}
#jsnap > div > img {
width:50%;
padding-left:0;
}
#modoru{
float:left;
}
#susumu{
float:right;
}
#buttons {
display:block;
margin:0 auto;
width:50%;
}
#indicate {
display:flex;
justify-content : center;
width:50%;
margin:0 auto;
}
#indicate > div {
font-size:300%;
}
HTML
JavaScript
//親要素取得
var element = document.getElementById("jsnap");
//子要素を参照するための番号
var num = 0;
//インジゲータ要素を取得
var indicate =document.getElementById("indicate");
//初期状態
for(i = 1; i <= element.children.length; i++){
var maru = document.createElement("div");
maru.innerHTML = "●";
indicate.appendChild(maru);
}
indicate.style.color = "lightgray";
indicate.children[0].style.color = "blue";
//「●」をsusumu()に連動させる
function maru_susumu () {
//「num」番目の「●」を青色に。
indicate.children[num].style.color = "blue";
//前の「●」をgrayに。
indicate.children[num-1].style.color = "lightgray";
}
function maru_modoru () {
//「num」番目の「●」を青色に。
indicate.children[num].style.color = "blue";
//前の「●」をgrayに。
indicate.children[num+1].style.color = "lightgray";
}
function susumu() {
if(num+1 < element.children.length) {
var child = element.children[num+1];
child.scrollIntoView(
{
behavior:"smooth",
block:"nearest",
inline:"nearest",
}
);
num++;
maru_susumu();
}
else {
return;
}
}
function modoru() {
if(num-1 >= 0) {
var child = element.children[num-1];
child.scrollIntoView(
{
behavior:"smooth",
block:"nearest",
inline:"nearest",
}
);
num--;
maru_modoru();
}
else {
return;
}
}
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。
🐧 twitter 🐧