練習:jsはクリックして画像を切り替えることを実現します.
26080 ワード
画像の切り替えをクリックして、ループ切り替えができるかどうかを制御します.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
a {
text-decoration: none;
color: white;
}
#control {
width: 590px;
height: 50px;
border: 10px solid black;
/* border-bottom-width: 0px; */
background-color: gray;
margin: 0 auto;
text-align: center;
line-height: 50px;
}
#container {
width: 590px;
height: 470px;
margin: 0 auto;
position: relative;
border: 10px solid black;
background-color: grey;
margin-top: 10px;
}
#pre,
#next {
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 22px;
top: 220px;
background-color: black;
opacity: 0.5;
}
#pre {
left: 0;
}
#next {
right: 0;
}
#order,
#info {
/* width: 590px; */
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: black;
opacity: 0.5;
position: absolute;
color: white;
}
#order {
top: 0;
}
#info {
bottom: 0;
}
style>
head>
<body>
<div id="control">
<button id="round"> button>
<button id="single"> button>
div>
<div id="container">
<a href="javascript:" id="pre"><a>
<a href="javascript:" id="next">>a>
<div id="order"> ...div>
<div id="info"> ...div>
<img src="" alt="" id="picture">
div>
<script>
//
let imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
// info
let infoArr = [' ', ' ', ' ', ' '];
var index = 0; //
let flag = true; // true
function $(id) {
return document.getElementById(id);
}
// ，
function showData() {
$('order').innerHTML = (index + 1) + '/' + imgArr.length;
$('info').innerHTML = infoArr[index];
$('picture').src = imgArr[index];
}
showData();
//
$('pre').onclick = function() {
index--;
if (index === -1 && flag) {
index = 0;
alert(" ！");
} else if (index === -1 && !flag) {
index = imgArr.length - 1;
}
showData();
}
//
$('next').onclick = function() {
index++;
if (index === imgArr.length && flag) {
index = imgArr.length - 1;
alert(" ！");
} else if (index === imgArr.length && !flag) {
index = 0;
}
showData();
}
//
$('round').onclick = function() {
flag = false;
alert(" ！");
}
$('single').onclick = function() {
flag = true;
alert(" ！");
}
script>
body>
html>