首页>>焦点图>>缩略图跟随的焦点图(2018-10-17)

缩略图跟随的焦点图

 左右箭头，缩略图会跟随移动，缩略图始终在列表第一个位置

缩略图跟随的焦点图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.   <div class="albery-container">  
  3.     <div class="albery-wrapper">  
  4.       <div class="albery-item"> <img src="https://picsum.photos/1000/666?image=655" alt=""> </div>  
  5.       <div class="albery-item"> <img src="https://picsum.photos/1000/666?image=656" alt=""> </div>  
  6.       <div class="albery-item"> <img src="https://picsum.photos/1000/666?image=657" alt=""> </div>  
  7.       <div class="albery-item"> <img src="https://picsum.photos/1000/666?image=658" alt=""> </div>  
  8.       <div class="albery-item"> <img src="https://picsum.photos/1000/666?image=659" alt=""> </div>  
  9.       <div class="albery-item"> <img src="https://picsum.photos/1000/666?image=660" alt=""> </div>  
  10.       <div class="albery-item"> <img src="https://picsum.photos/1000/666?image=661" alt=""> </div>  
  11.       <div class="albery-item"> <img src="https://picsum.photos/1000/666?image=662" alt=""> </div>  
  12.       <div class="albery-item"> <img src="https://picsum.photos/1000/666?image=663" alt=""> </div>  
  13.       <div class="albery-item"> <img src="https://picsum.photos/1000/666?image=664" alt=""> </div>  
  14.     </div>  
  15.     <div class="move-right"> <a href="#" id="rightArrow">▶</a> </div>  
  16.     <div class="move-left"> <a href="#" id="leftArrow">◀</a> </div>  
  17.   </div>  
  18.   <div class="pagination-container">  
  19.     <div class="pagination-wrapper">  
  20.       <div class="pagination-item" data-item="1"> <img src="https://picsum.photos/116/77?image=655" alt=""> </div>  
  21.       <div class="pagination-item" data-item="2"> <img src="https://picsum.photos/116/77?image=656" alt=""> </div>  
  22.       <div class="pagination-item" data-item="3"> <img src="https://picsum.photos/116/77?image=657" alt=""> </div>  
  23.       <div class="pagination-item" data-item="4"> <img src="https://picsum.photos/116/77?image=658" alt=""> </div>  
  24.       <div class="pagination-item" data-item="5"> <img src="https://picsum.photos/116/77?image=659" alt=""> </div>  
  25.       <div class="pagination-item" data-item="6"> <img src="https://picsum.photos/116/77?image=660" alt=""> </div>  
  26.       <div class="pagination-item" data-item="7"> <img src="https://picsum.photos/116/77?image=661" alt=""> </div>  
  27.       <div class="pagination-item" data-item="8"> <img src="https://picsum.photos/116/77?image=662" alt=""> </div>  
  28.       <div class="pagination-item" data-item="9"> <img src="https://picsum.photos/116/77?image=663" alt=""> </div>  
  29.       <div class="pagination-item" data-item="10"> <img src="https://picsum.photos/116/77?image=664" alt=""> </div>  
  30.     </div>  
  31.   </div>  
  32. </div>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_710.html