提问人：Avinash Kumar 提问时间：9/27/2023 更新时间：9/27/2023 访问量：30
如何在 angular 中获取鼠标悬停时的图像索引
How to get index of Image on mouse hover in angular
问：
我正在尝试在我的项目中实现以下几点。
- 我正在尝试实现相同的图像框和功能，如以下链接所示。演示实现链接
- 在我的代码中，我已经实现了侧框功能，但只是想知道当我将鼠标悬停在该图像上时如何获取包含所有详细信息的图像索引。
- 我想在悬停时显示与上述链接相同的图像。
请帮帮我。下面是我的代码。
@ViewChild('hello',{static:false}) FirstRef!:ElementRef;
@ViewChild('next',{static:false}) Next!:ElementRef;
@ViewChild('prev',{static:false}) Prev!:ElementRef;
SideImagesIcons=['../../../../assets/Product/p1.webp','../../../../assets/Product/p2.webp','../../../../assets/Product/p3.webp',
'../../../../assets/Product/p4.webp','../../../../assets/Product/p5.webp','../../../../assets/Product/p6.webp','../../../../assets/Product/p7.webp'
,'../../../../assets/Product/p8.webp']
SideImages=['../../../assets/Product/p1.webp','../../../assets/Product/p2.webp','../../../assets/Product/p3.webp','../../../assets/Product/p4.webp'
,'../../../assets/Product/p5.webp','../../../assets/Product/p6.webp','../../../assets/Product/p7.webp','../../../assets/Product/p8.webp','../../../assets/Product/p9.webp']
imageArrayToDisplay:string[]=[];
displaySize=5;
displayIndex=0;
startIndex=0;
selectedIndex=0;
prevIndex=this.displaySize;
ngOnInit(): void {
this.imageArrayToDisplay=this.SideImagesIcons.slice(this.startIndex,this.currentIndex);
console.log("current index = "+this.currentIndex+"\nDisplay Index "+this.displayIndex+"\nStart Index"+this.startIndex+"\nPrev Index"+this.prevIndex);
}
prevClick(){
this.prevIndex=this.startIndex-1;
if(this.displayIndex>this.displaySize && this.prevIndex>=0)
{
this.displayIndex--;
this.imageArrayToDisplay=this.SideImagesIcons.slice(this.prevIndex,this.displayIndex)
this.startIndex--;
this.Next.nativeElement.style.display='block';
}
this.currentIndex=this.displayIndex;
if(this.prevIndex<=0)
{
this.Prev.nativeElement.style.display='none';
}
console.log("current index = "+this.currentIndex+"\nDisplay Index "+this.displayIndex+"\nStart Index"+this.startIndex+"\nPrev Index"+this.prevIndex);
}
currentIndex=this.displaySize;
nextClick(){
this.displayIndex=this.currentIndex+1;
this.startIndex+=1;
//this loop will run till to show the images till it reaches the last image
if(this.displayIndex>this.displaySize && this.displayIndex <=this.SideImagesIcons.length)
{
this.imageArrayToDisplay=this.SideImagesIcons.slice(this.startIndex,this.displayIndex)
this.currentIndex++;
this.Prev.nativeElement.style.display='block';
}
//this will handle if we reaches to last image
else if(this.currentIndex<=this.SideImagesIcons.length)
{
this.currentIndex=this.SideImagesIcons.length;
this.displayIndex=this.currentIndex;
this.startIndex=(this.SideImagesIcons.length-this.displaySize);
this.Next.nativeElement.style.display='none';
}
console.log("current index = "+this.currentIndex+"\nDisplay Index "+this.displayIndex+"\nStart Index"+this.startIndex);
}
.flex-container {
display: flex;
/* align-items: center; */
flex-direction: column;
}
.container {
align-content: center;
}
.box {
display: flex;
}
.side {
width: 108px;
height: 400px;
border: 1px solid gray;
overflow-y: hidden;
}
.side::-webkit-scrollbar {
display: none;
}
.slide-box {
position: relative;
width: 100%;
height: 500px;
border: 1px solid red;
}
.slide-box ul {
transition: -webkit-transform .4s ease-in-out;
transition: transform .4s ease-in-out;
transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
transform: translateY(0px);
list-style: none;
}
.slide-box ul li {
width: 64px;
height: 64px;
border: 1px solid green;
}
.inside {
padding: 5px;
width: 100%;
height: 100%;
position: relative;
}
.inside-li {
width: 100%;
height: 100%;
}
.inside-li img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.btn-prev {
position: absolute;
top: 0%;
left: 39%;
width: 64%;
display: none;
}
.btn-next {
width: 64%;
position: absolute;
bottom: 32%;
left: 37%;
}
.enlarge-box {
width: 400px;
height: 400px;
border: 1px solid black;
}
.inside-img-box {
padding: 5px;
}
.inside-img-box .inside-li img {
max-height: 99%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}<div class="flex-container">
<div class="row">
<div class="col-6">
<div class="container">
<div class="box">
<div class="side">
<div class="slide-box">
<ul>
<li *ngFor="let prod of imageArrayToDisplay; let i=index">
<div class="inside">
<div class="inside-li">
<img [src]="prod" alt="" [ngClass]="{'active':selectedIndex ===i}"> {{i}}
</div>
</div>
</li>
</ul>
<button #prev class="btn-primary btn-prev" (click)="prevClick()">Prev</button>
<button #next class="btn-success btn-next" (click)="nextClick()">Next</button>
</div>
</div>
<div class="enlarge-box">
<div class="image-box">
<ul>
<li>
<div class="inside-img-box">
<div class="inside-li">
<img src="../../../assets/Product/p1.webp" alt="">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<p #hello>Hello world</p>
</div>
</div>
</div>答：
0赞
Eli Porush
9/27/2023
#1
只需使用 event 并将当前迭代图像公开给变量即可(hover)
例如：
<li *ngFor="let prod of imageArrayToDisplay; let i=index">
<div class="inside">
<div class="inside-li">
<img (hover)="imageHover(prod)" [src]="prod" alt="" [ngClass]="{'active':selectedIndex ===i}"> {{i}}
</div>
</div>
</li>
并在方法上将参数保存到类变量
（为示例命名 - ）并从要显示大图像的位置的模板中读取它imageHoverprodcurrentImageUrl
<div class="inside-img-box">
<div class="inside-li">
<img [src]="currentImageUrl" alt="">
</div>
</div>
评论