如何解决如何在javascript的function{}中定义图片,以调整图片大小以便自动滑动?
所以我正在尝试调整图像大小,以免在我编码的自动图像siider中放大。功能代码是我遇到的麻烦。我主要是初学者,一旦完成此网站,我计划正式学习JavaScript。我大部分都是通过修改我曾经参加过的Youtube教程编写网站代码的。
以下图像滑块的HTML如下:
<div class="slider">
<div id="img1">
<img src="img/Royce Sunrise.JPG">
</div>
</div>
我的CSS代码为:
.slider {
width: 90%;
height: 500px;
margin: 20px auto;
box-sizing: border-box;
overflow: hidden;
box-shadow: 5px 5px 10px grey;
}
img1 {
width: 50%;
height: 50%;
animation: ani 2s linear;
}
img2{
width: 100%;
height: 100%;
animation: ani 2s linear;
}
img3{
width: 100%;
height: 100%;
animation: ani 2s linear;
}
@keyframes ani {
0% {
transform: scale(1.2);
}
10% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
我的javascript如下:
var images = ["img/Royce Sunrise.JPG","img/RoyceLakeImage2.JPG","img/RoyceLakeImage1.JPG"];
var x = 0;
var imgs = document.getElementById("img1");
var interval = setInterval(slider,2000);
//positioning big img center to canvas center
img.onload = function(){
let x = -(img.width - canvas.offsetWidth)/2+"px"
let y = -(img.height - canvas.offsetHeight)/2+"px"
console.log(x,"$$$$");
console.log(y,"$$$$");
//scaling....
let ratio = canvas.offsetWidth/img.width
console.log(ratio,"$$$$");
img.style.transform = `translate(${x},${y}) scale(${ratio})`
}
function slider() {
if (x < images.length) {
x++;
} else {
x = 1;
}
imgs.innerHTML = "<img src=\"" + images[x - 1] + "\">";
console.log(images[x-1]);
}
此代码显示错误
img.onload = function(){
让我知道我可以解决的问题!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。