swiper hover右边列表标题,显示左边轮播对应的图片

Ervin

1. 要实现当鼠标悬停在右边的列表标题上时，显示左边Swiper轮播对应的图片，可以通过监听鼠标悬停事件，并使用Swiper的API来切换图片。以下是一个简单的实现示例：
   
2. 
   
3. HTML部分：
   
4. <div class="swiper-container">
   
5.     <div class="swiper-wrapper">
   
6.         <div class="swiper-slide" style="background-image: url(image1.jpg);"></div>
   
7.         <div class="swiper-slide" style="background-image: url(image2.jpg);"></div>
   
8.         <div class="swiper-slide" style="background-image: url(image3.jpg);"></div>
   
9.     </div>
   
10.     <!-- 如果需要分页器 -->
    
11.     <div class="swiper-pagination"></div>
    
12. </div>
    
13. 
    
14. <ul class="list">
    
15.     <li>标题1</li>
    
16.     <li>标题2</li>
    
17.     <li>标题3</li>
    
18. </ul>
    
19. 
    
20. CSS部分（仅用于展示样式，不直接相关于功能实现）：
    
21. .swiper-container {
    
22.     width: 600px;
    
23.     height: 300px;
    
24.     position: relative;
    
25. }
    
26. 
    
27. .swiper-slide {
    
28.     background-size: cover;
    
29.     background-position: center;
    
30. }
    
31. 
    
32. .list {
    
33.     list-style: none;
    
34.     position: absolute;
    
35.     right: 0;
    
36.     top: 0;
    
37.     padding: 10px;
    
38. }
    
39. 
    
40. .list li {
    
41.     margin: 5px;
    
42.     cursor: pointer;
    
43. }
    
44. 
    
45. JavaScript部分（使用Swiper）：
    
46. var swiper = new Swiper('.swiper-container', {
    
47.     // 如果需要分页器
    
48.     pagination: {
    
49.         el: '.swiper-pagination',
    
50.     },
    
51. });
    
52. 
    
53. var listItems = document.querySelectorAll('.list li');
    
54. listItems.forEach((item, index) => {
    
55.     item.addEventListener('mouseenter', function() {
    
56.         // 当鼠标悬停时，切换到对应的幻灯片
    
57.         swiper.slideTo(index);
    
58.     });
    
59. });
    
60. 
    
61. 在这个示例中，我们首先初始化了Swiper实例，然后获取所有列表项。通过为每个列表项添加mouseenter事件监听器，当鼠标悬停在某个列表项上时，会使用Swiper的slideTo方法切换到相应的幻灯片。这里假设列表项的顺序与Swiper的幻灯片的顺序相匹配。

复制代码