如何获取鼠标悬停时图像的索引

问题描述 投票：0回答：1

我正在尝试在我的项目中实现以下几点。

  1. 我正在尝试实现与以下链接相同的图像框和功能。 演示实施链接
  2. 在我的代码中，我已经实现了侧框功能，但只是想知道当我将鼠标悬停在该图像上时如何获取包含所有详细信息的图像索引。
  3. 我想在鼠标悬停时显示与上面链接相同的图像。

请帮帮我。下面是我的代码。

  @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>

angular typescript image-gallery flipkart-api
1个回答
0
投票

只需使用 

(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>

并在 

imageHover
方法上将 
prod
参数保存到类变量中 （将其命名为示例 - 
currentImageUrl
）并从模板中读取要显示大图像的位置

<div class="inside-img-box">
    <div class="inside-li">
           <img [src]="currentImageUrl" alt="">
    </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.