gpt4 book ai didi

javascript - js中带有页码的幻灯片

转载 作者:行者123 更新时间:2023-12-03 03:55:54 26 4
gpt4 key购买 nike

我创建了简单的幻灯片。如果您想更改图像,则必须单击键盘上的箭头按钮。我想添加描述,例如“7 中的 1 项”等。

这是我的来源:

var img_index = 0;
var imgs = [
"assets/1.jpg",
"assets/2.jpg",
"assets/3.jpg",
"assets/4.jpg",
"assets/5.jpg",
"assets/6.jpg",
"assets/7.jpg"

];

function changeImage() {
var img = document.getElementById("images");
img_index = ++img_index % 7;
img.src = imgs[img_index];
}


function checkKey(e) {

e = e || window.event;
if (e.keyCode == '37') {
changeImage();
} else if (e.keyCode == '39') {
changeImage();
}

}

document.onkeydown = checkKey;



function sliderText (){

}
<!DOCTYPE html>
<html lang="en">

<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">
<link rel="stylesheet" href="style12.css">
<title>Task 12</title>
</head>
<div id="slideshow_section">
<img id="images" src="assets/1.jpg" />
</div>

<body>

</body>
<script src="script12.js"></script>

</html>

您能给我一些提示吗?我该怎么做?

谢谢你,梅吉

最佳答案

这是另一个工作代码(我将解释如何设置图像描述。):

          var images = [
"http://www.helloworld.com/uploads/slider/1.jpg",
"http://www.helloworld.com/uploads/slider/2.jpg",
"http://www.helloworld.com/uploads/slider/3.jpg"
];
var num = 0;
function next() {
var slider = document.getElementById("slider");
num++;
if(num >= images.length) {
num = 0;
}
slider.src = images[num];
setDescription();//calling function
}

function prev() {
var slider = document.getElementById("slider");
num--;
if(num < 0) {
num = images.length-1;
}
slider.src = images[num];
setDescription();
//calling function - this can be included to your changeImage() function without any errors.
}
//To set the image description, i use following function:


function setDescription(){
var descr = document.getElementById("Description");
var selectedimageindex = num + 1;/*beause Arrays start counting at 0
*/
descr.innerHTML= "image "+ selectedimageindex +" of " + images.length;

}
<小时/>

Referring to your code it would look like this(Run it! ;) ): I needed to chage some Parts, like the image resources.

var img_index = 0;
var imgs = [
"http://www.sololearn.com/uploads/slider/1.jpg",
"http://www.sololearn.com/uploads/slider/2.jpg",
"http://www.sololearn.com/uploads/slider/3.jpg"
];

function changeImage() {
var img = document.getElementById("images");
img_index = ++img_index % 3;
img.src = imgs[img_index];
sliderText();
}

//needed to remove keychange functions because its not working on stackoverflow

function sliderText (){
var Description = document.getElementById("description");
var imagenumber = img_index + 1; //Arrays start counting at 0.
Description.innerHTML = "image "+ imagenumber + " of "+imgs.length;
}
<!DOCTYPE html>
<html lang="en">

<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">
<link rel="stylesheet" href="style12.css">
<title>Task 12</title>
</head>
<div id="slideshow_section">
<img id="images" src="http://www.sololearn.com/uploads/slider/1.jpg" />
<span id="description">Image 1 of 3</span>
<button id="nextbtn" onclick="changeImage()">Next</button>
</div>

<body>

</body>

</html>

Feedback to this answer?please! Hope it was helpful!

<小时/>

祝你好运!

关于javascript - js中带有页码的幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44955204/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com