Contoh terperinci tentang cara melaraskan ketinggian carta karusel

Artikel ini membawakan anda pengetahuan yang berkaitan tentang bahagian hadapan terutamanya cara membuat ketinggian penyesuaian untuk karusel. Saya harap ia dapat membantu semua orang.

Saya tidak tahu sama ada anda mengalami keperluan sedemikian atau melihat kesan yang serupa Apabila anda memasuki senarai dan melihat imej karusel secara terperinci, bekas ketinggian karusel akan menyesuaikan diri apabila jari anda menatal imej karusel. jadi seperti berikut Kandungan akan diperah ke atas, ketinggian akan dikira semasa proses gelongsor, dan ia akan menatal ke gambar seterusnya apabila dikeluarkan Ia juga akan mengira ketinggian gambar yang sepadan, dan kemudian mencipta kesan animasi perlahan. Sama seperti gambar di bawah.

Anda boleh melihat kandungan imej dan teks di atas, dan ketinggian berubah apabila karusel meluncur. Tanpa berlengah lagi, mari terus ke kod.

Kaedah pelaksanaan

Anda boleh mengawal gambar dengan mendengar acara mounse tetikus atau gelongsor jari touch Di sini, artikel ini hanya akan membincangkan idea tentang melaksanakan fungsi karusel , tumpuan adalah bagaimana untuk mencapai tahap kebolehsuaian yang tinggi.

Mari mulakan teks secara langsung dan lihat struktur kod html dahulu.

struktur html

<div>
  <div>
    <div>
      <div>
        <img  alt="Contoh terperinci tentang cara melaraskan ketinggian carta karusel" >
      </div>
      <div>
        <img  alt="Contoh terperinci tentang cara melaraskan ketinggian carta karusel" >
      </div>
      <div>
        <img  alt="Contoh terperinci tentang cara melaraskan ketinggian carta karusel" >
      </div>
    </div>
  </div>
  <div>这是一段内容</div>
</div>

gaya css

.container {
  width: 100%;
  overflow: hidden;
}.wrapper {
  width: 100%;
}.swiper {
  font-size: 0;
  white-space: nowrap;
}.item {
  display: inline-block;
  width: 100%;
  vertical-align: top; // 一定要使用顶部对齐，不然会出现错位的情况
}.item img {
  width: 100%;
  height: auto;
  display: block;
}.content {
  position: relative;
  z-index: 9;
  font-size: 14px;
  text-align: center;
  padding-top: 20px;
  background-color: #fff;
  height: 200px;
}

Terdapat beberapa perkara yang perlu diberi perhatian;

1. Apabila menggunakan induk white-space, tetapan elemen subset display: inline-block akan disusun dalam ketinggian yang berbeza Penyelesaiannya adalah untuk menambah vertical-align: top saya tidak akan menerangkan secara terperinci tentang sebab tertentu. .
2. Selain itu, ibu bapa juga perlu menetapkan font-size: 0 Jika ia tidak ditambah, akan ada jurang antara dua subset Selepas menambahnya, jurang akan dialih keluar. Adalah lebih baik untuk menetapkan imej
3. img menjadi penyesuaian ketinggian, dan tambahkan 100% pada lebar display: block Jika tidak, akan ada jurang di bahagian bawah.

Selepas menulis html bahagian dan gaya bekas di atas, mari kita lihat bagaimana js diproses.

Pelaksanaan Js

Sebelum kita mula, mari kita fikirkan cara melaksanakan masalah karusel dan sangat adaptif ini, dibahagikan kepada beberapa langkah

1. Apabila tetikus ditekan, adalah perlu untuk merekodkan kedudukan semasa dan beberapa maklumat permulaan lain, dan menambah peristiwa tetikus yang sepadan dengan elemen induk semasa.
2. Apabila tetikus bergerak, anda perlu menolak titik bergerak masa nyata semasa dan titik menekan untuk mendapatkan kedudukan jarak bergerak, dan kemudian menetapkannya kepada Elemen induk menetapkan kedudukan transform gayanya, dan juga melakukan pemprosesan sempadan lain di tengah, dan sudah tentu mengubah ketinggian.
3. Apabila tetikus dilepaskan, ia dinilai dengan maklumat jarak yang direkodkan semasa pergerakan sama ada ia meluncur ke kiri atau kanan, dan indeks yang sepadan diperolehi Jarak untuk menatal gambar seterusnya boleh dikira melalui indeks , dan ditetapkan selepas keluarantransition Hanya animasi peralihan.

Mengikut idea yang kami bayangkan, mulakan teks; untuk imej dimuatkan. Untuk mendapatkan ketinggian setiap elemen, saya tidak menulis kod khusus di sini untuk menyelamatkan diri daripada kemalasan

di atas sepadan dengan ketinggian setiap imej selepas pemaparan terbaik untuk membiarkan bahagian belakang menghantar semula lebar jalur yang tinggi Ini menghapuskan keperluan untuk menggunakan

untuk mengendalikan perkara ini.

const data = {
  ele: null,
  width: 0,
  len: 0,
  proportion: .3,
  type: false,
  heights: [500, 250, 375],
  currentIndex: 0,
  startOffset: 0,
  clientX: 0,
  distanceX: 0,
  duration: 30,
  touching: false
}

const wrapper = data.ele = document.querySelector('.wrapper')
const items = document.querySelectorAll('.item')
data.width = wrapper.offsetWidth
data.len = items.length - 1
wrapper.addEventListener('touchstart', onStart)
wrapper.addEventListener('mousedown', onStart)

Apabila tetikus ditekan

heightsonloadDalam kod di atas, saya telah menjadikannya serasi dengan terminal PC dan mudah alih Seperti yang dirancang, simpan koordinat

dan koordinat awal

Ini dikira dari indeks semasa dan lebar induk Senarionya ialah apabila menatal dari gambar kedua ke gambar ketiga, jarak dari gambar pertama sebelumnya juga akan ditambah, jika tidak, pengiraan akan menjadi salah untuk gelongsor.

function onStart(event) {
  if (event.type === 'mousedown' && event.which !== 1) return
  if (event.type === 'touchstart' && event.touches.length > 1) return
  data.type = event.type === 'touchstart'
  const events = data.type ? event.touches[0] || event : event

  data.touching = true
  data.clientX = events.clientX
  data.startOffset = data.currentIndex * -data.width

  data.ele.style.transition = `none`
  window.addEventListener(data.type ? 'touchmove' : 'mousemove', onMove, { passive: false })
  window.addEventListener(data.type ? 'touchend' : 'mouseup', onEnd, false)
}

Selain itu,

telah ditambah semasa memantau pergerakan demi keserasian di bahagian mudah alih. clientXstartOffsetApabila tetikus bergerak,

passive: false diproses dengan sempadan Jika jarak melebihi 30, ia tidak akan dibenarkan untuk terus meluncurkan nilai

yang disimpan sebelum ini untuk mendapatkan Ia adalah jarak tertentu yang dipindahkan.

Apabila tetikus dilepaskan,

function onMove(event) {
  event.preventDefault()
  if (!data.touching) return
  const events = data.type ? event.touches[0] || event : event

  data.distanceX = events.clientX - data.clientX

  let translatex = data.startOffset + data.distanceX
  if (translatex > 0) {
    translatex = translatex > 30 ? 30 : translatex
  } else {
    const d = -(data.len * data.width + 30)
    translatex = translatex <p><code>startOffset</code> mengira </p> ambang gelongsor untuk mendapatkan indeks selepas pelepasan, iaitu, apabila melebihi satu pertiga daripada lebar induk, keluar akan tatal ke Seterusnya, selepas mendapat indeks, anda boleh menetapkan jarak akhir untuk bergerak. Ingat untuk menambah <h4 data-id="heading-7"> untuk mencipta kesan pelonggaran Akhir sekali, jangan lupa untuk mengalih keluar pendengar acara. </h4><pre class="brush:php;toolbar:false">function onEnd() {
  if (!data.touching) return
  data.touching = false

  // 通过计算 proportion 滑动的阈值拿到释放后的索引
  if (Math.abs(data.distanceX) > data.width * data.proportion) {
    data.currentIndex -= data.distanceX / Math.abs(data.distanceX)
  }
  if (data.currentIndex  data.len) {
    data.currentIndex = data.len
  }
  const translatex = data.currentIndex * -data.width

  data.ele.style.transition = 'all .3s ease'
  data.ele.style.transform = `translate3d(${translatex}px, 0, 0)`
  data.ele.style.webkitTransform = `translate3d(${translatex}px, 0, 0)`

  window.removeEventListener(data.type ? 'touchmove' : 'mousemove', onMove, { passive: false })
  window.removeEventListener(data.type ? 'touchend' : 'mouseup', onEnd, false)
}

Pada ketika ini, kesan karusel ringkas di atas sudah lengkap, tetapi masih ada satu perkara yang hilang, iaitu ketinggian penyesuaian yang perlu dibincangkan dalam artikel ini, saya akan membincangkannya secara berasingan .

proportiontransitionAdaptif ketinggian

Anda boleh menyusun kod yang berkaitan di dalamnya apabila bergerak Tambahkan kod berikut pada fungsi

untuk mendapatkan ketinggian masa nyata.

const index = data.currentIndex
const currentHeight = data.heights[index]
    
// 判断手指滑动的方向拿到下一张图片的高度
let nextHeight = data.distanceX > 0 ? data.heights[index - 1] : data.heights[index + 1]
let diffHeight = Math.abs((nextHeight - currentHeight) * (data.distanceX / data.width))
let realHeight = currentHeight + (nextHeight - currentHeight > 0 ? diffHeight : -diffHeight) 
 data.ele.style.height = `${realHeight}px`

这里是移动时的高度变化，另外还需要在释放时也要处理， onEnd 函数里加上以下代码。

// ... 因为上面已经拿到了下一张的索引 currentIndex
const currentHeight = data.heights[data.currentIndex]

data.ele.style.height = `${currentHeight}px`

因为上面已经拿到了下一张的索引 currentIndex 所以再滚动到下一张是就直接通过数据获取就可以了。

推荐学习：《web前端开发视频教程》

Atas ialah kandungan terperinci Contoh terperinci tentang cara melaraskan ketinggian carta karusel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!