时间戳

首页 > 解决方案 > 使触摸滑块的图像像超链接一样重定向到特定页面

javascript - 使触摸滑块的图像像超链接一样重定向到特定页面

问题描述

我正在尝试做touch-slide-bar。到目前为止，我找到了一个示例，但它没有 redict 链接。它只有照片。我想单击照片以将我重定向到特定的 url。

我有 4 张图片，就像 4 个不同的页面

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css" rel="stylesheet" /><body >
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
    <a href="http://www.google.com" onclick="return myFunction();">Link</a>
    </div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
  <div class="swiper-pagination"></div>
  
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
</body>
<script>
function myFunction() {
    document.getElementById(".myDiv").style.flexGrow = "5"; 
}

var swiper = new Swiper('.swiper-container', {
  effect: 'coverflow',
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

</script></html>
<style>body {
  margin: 0;
  padding: 0;
  align-content: right
}

.swiper-container {
  width: 350px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

.swiper-slide:nth-child(1) {
  background-image: url(https://g.hizliresim.com/sari-yaprakli-yol)
  
}

.swiper-slide:nth-child(2) {
  background-image: url(https://picsum.photos/300/300/?image=1050)
}

.swiper-slide:nth-child(3) {
  background-image: url(https://picsum.photos/300/300/?image=1039)
}

.swiper-slide:nth-child(4) {
  background-image: url(https://picsum.photos/300/300/?image=1019)
}

div.swiper-slide{
  text-align: justify;
}

}</style>

我试过用<a href=''>方法和 js 函数来做到这一点。但它基本上提供了一个我现在想要的链接:(

标签： javascripthtmlcss

解决方案

这样做的一个选项...用带有标签div的swiper-slide类替换a，为每个标签指示它自己的网站链接。这并不重要，因为 Swiper 插件被引用到swiper-slide该类。

<div class="swiper-wrapper">
    <a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
    <a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
    <a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
    <a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
</div>


<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css" rel="stylesheet" /><body >
<div class="swiper-container">
  <div class="swiper-wrapper">
    <a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();">
    </a>
    <a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
    <a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
    <a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
  </div>
  <div class="swiper-pagination"></div>
  
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
</body>
<script>
function myFunction() {
    document.getElementById(".myDiv").style.flexGrow = "5"; 
}

var swiper = new Swiper('.swiper-container', {
  effect: 'coverflow',
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

</script></html>
<style>body {
  margin: 0;
  padding: 0;
  align-content: right
}

.swiper-container {
  width: 350px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

.swiper-slide:nth-child(1) {
  background-image: url(https://g.hizliresim.com/sari-yaprakli-yol)
  
}

.swiper-slide:nth-child(2) {
  background-image: url(https://picsum.photos/300/300/?image=1050)
}

.swiper-slide:nth-child(3) {
  background-image: url(https://picsum.photos/300/300/?image=1039)
}

.swiper-slide:nth-child(4) {
  background-image: url(https://picsum.photos/300/300/?image=1019)
}

a.swiper-slide{
  text-align: justify;
}

}</style>

推荐阅读