swiper插件怎么设置鼠标经过缩略图标切换图片，如下图

Posted 2023-04-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了swiper插件怎么设置鼠标经过缩略图标切换图片，如下图相关的知识，希望对你有一定的参考价值。

swiper插件怎么设置鼠标经过缩略图标切换图片

参考技术A 绑定mouseover，获取到经过缩略图的index，再使用swiper 提供的跳转函数追问

这是要写JS来控制它嘛。。。。。。这我就不会了~

本回答被提问者和网友采纳参考技术B $('.swiper-slide').on('mouseover', function ()
slidercontent.slideTo($(this).index());
)

鼠标经过图标切换效果

我们对于鼠标经过图标切换效果这个神奇效果并不陌生，那么怎么用代码实现呢？

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标经过图标切换效果</title>
 <style type="text/css">
 a
 {
  display:block; 
  width:67px;
  height:32px; 
  background:url(images/ico.png) no-repeat;
 }
 a:hover
 {
  background-position:bottom;
 }
 </style>
</head>

<body>
  <a href="#"></a>
</body>
</html>