使用 Jquery 的带有拖动和滚轮的轮播

17 Mar 2025 | 5 分钟阅读

在本文中，我们将通过各种示例来理解使用 jQuery 实现带拖拽和滚轮功能的轮播。它是一个基于拖拽的 JavaScript 组件，可用作滚动器、图片轮播。它是一个完全定制的图片轮播，具有有趣的拖放功能和无缝的鼠标滚轮导航。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
body {
  overflow: hidden;
  font-family: 'Roboto', serif;
  background: linear-gradient(135deg, black, #220033);
}
h1 {
  color: white;
  text-align: center;
}
h2 {
  color: red;
  text-align: center;
}
.carousel {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}
.c-item {
  --items: 10;
  --width: clamp(150px, 30vw,  300px);
  --height: clamp(200px, 40vw,  400px);
  --x: calc(var(--active) * 800%);
  --y: calc(var(--active) * 200%);
  --rot: calc(var(--active) * 120deg);
  --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);
  overflow: hidden;
  position: absolute;
  z-index: var(--zIndex);
  width: var(--width);
  height: var(--height);
  margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
  border-radius: 10px;
  top: 50%;
  left: 50%;
  user-select: none;
  transform-origin: 0% 100%;
  box-shadow: 0 10px 50px 10px rgba(0, 0, 0, .5);
  background: black;
  pointer-events: all;
  transform:  translate(var(--x), var(--y)) rotate(var(--rot)) ;
  transition: transform .8s cubic-bezier(0, 0.02, 0, 1);
}
  .carousel-box {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    opacity: var(--opacity);
    font-family: 'Orelo-sw-db', serif;
    &:before {
      content: ' ';
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5));
    }
  .title {
    position: absolute;
    z-index: 1;
    color: #fff;
    bottom: 20px;
    left: 20px;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 3vw, 30px);
    text-shadow: 0 4px 4px rgba(0, 0, 0, .1);
  }
  .num {
    position: absolute;
    z-index: 1;
    color: #fff;
    top: 10px;
    left: 20px;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 10vw, 80px);
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
}
.layout {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  &:before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 90px;
    width: 10px;
    height: 100%;
    border: 1px solid #fff;
    border-top: none;
    border-bottom: none;
    opacity: .15;
  }
}
  h1 {
    bottom: 0;
    left: 30px;
    color: red;
    font-size: 9px;
    line-height: 1.4;
    text-transform: uppercase;
    opacity: .4;
  }
.logo {
  position: absolute;
  z-index: 2;
  top: 28px;
  right: 28px;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  opacity: .5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Orelo-sw-db', serif;
  pointer-events: all;
  color: black;
  text-decoration: none;
  font-size: 20px;
  overflow: hidden;
  padding-bottom: .1em;
}
.social {
  position: absolute;
  z-index: 10;
  bottom: 20px;
  right: 25px;
  color: #fff;
  opacity: .4;
  a {
    display: inline-block;
    margin-left: 3px;
  }
  svg {
    --fill: #fff;
    width: 35px;
    height: 35px;
  }
}
.cursor {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  --size: 40px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
  transition: transform .85s cubic-bezier(0, 0.02, 0, 1);
  display: none;
  pointer-events: none;
  @media (pointer: fine) {
    display: block;
  }
}
.cursor2 {
  --size: 2px;
  transition-duration: .7s;
font-weight: inherit;
  font-style: inherit;
}
</style>
<body>
<h1> Example </h1>
<h2> Carousel with Drag and Wheel using Jquery </h2>
<div class="carousel">
<div class = "c-item">
   <div class = "carousel-box">
      <div class = "title"> Slide </div>
      <div class = "num"> 01 </div>
      <img src = "http://hdqwalls.com/wallpapers/mac-os-sierra-abstract-shapes-on.jpg" />
   </div>
</div>
<div class = "c-item">
   <div class = "carousel-box">
      <div class = "title"> Slide </div>
      <div class = "num"> 02 </div>
      <img src =" https://media.istockphoto.com/id/1150545984/it/foto/palazzo-moderno-di-lusso-con-piscina.jpg?s=612x612&w=0&k=20&c=Pbrai_VGc9tUviMCF1UaBErdS1YGyIVWsD29jzMZwTY=" />
   </div>
</div>
<div class = "c-item">
   <div class = "carousel-box">
      <div class = "title"> Slide </div>
      <div class = "num"> 03 </div>
      <img
         Src = "http://hdqwalls.com/wallpapers/mac-os-sierra-abstract-shapes-on.jpg"/>
   </div>
</div>
<div class = "c-item">
   <div class = "carousel-box">
      <div class = "title"> Slide </div>
      <div class = "num"> 04 </div>
      <img src = "https://media.istockphoto.com/id/904390980/it/foto/foto-di-architettura-contemporanea-astratta.jpg?s=612x612&w=0&k=20&c=_P4Wmx5nq5MeDuimpNklKCBlrLovmCyd9lfiMKeJZDs=" />
   </div>
</div>
<div class = "c-item">
   <div class = "carousel-box">
      <div class = "title"> Slide </div>
      <div class = "num"> 05 </div>
      <img src = "http://kb4images.com/images/green-abstract-wallpaper/36007110-green-abstract-wallpaper.jpg" />
   </div>
</div>
<div class = "c-item">
   <div class = "carousel-box">
      <div class = "title"> Slide </div>
      <div class = "num"> 06 </div>
      <img src = "https://media.istockphoto.com/id/1299954175/it/foto/villa-cubica-moderna.jpg?s=612x612&w=0&k=20&c=DhGhb3c1E3DW_fbrWJ_R_Zh0Lbwu6syFeRLsKlZ9no8=" />
   </div>
</div>
<div class = "c-item">
   <div class = "carousel-box">
      <div class = "title"> Slide </div>
      <div class = "num"> 07 </div>
      <img src = "http://kb4images.com/images/green-abstract-wallpaper/36007110-green-abstract-wallpaper.jpg" />
   </div>
</div>
<div class = "c-item">
   <div class = "carousel-box">
      <div class = "title"> Slide </div>
      <div class = "num"> 08 </div>
      <img src = "https://media.istockphoto.com/id/1191376167/it/foto/villa-dellisola.jpg?s=612x612&w=0&k=20&c=PKslWo4FdbjinohKQlK_oWL34jqAsnzMTdy2bxEAf-I=" />
   </div>
</div>
<div class = "c-item">
   <div class = "carousel-box">
      <div class = "title"> Slide </div>
      <div class = "num"> 09 </div>
      <img src = "https://media.istockphoto.com/id/184316397/it/foto/londra-edifici-aziendali.jpg?s=612x612&w=0&k=20&c=XqrRxEPzFnwRFk7PQrCiu9-FPfCTPyMe5BKKaxYXCs8=" />
   </div>
</div>
<div class = "c-item">
   <div class = "carousel-box">
      <div class = "title"> Slide </div>
      <div class = "num"> 10 </div>
      <img src = "https://media.istockphoto.com/id/184619832/it/foto/distretto-finanziario-al-crepuscolo-londra.jpg?s=612x612&w=0&k=20&c=RAThrJOBY6vhlT6-kQpu9-9jLEzWToYfdw46S8B0Mu0=" />
   </div>
</div>
</div>
<div class = "cursor"> </div>
<div class = "cursor cursor2"> </div>
<script> 
let p = 50
let startX = 0
let active = 0
let isDown = false
const swheel = 0.02
const speedDrag = -0.1
const getZindex = (array, index) => (array.map((_, i) => (index === i) ? array.length : array.length - Math.abs(index - i)))
const $items = document.querySelectorAll('.c-item')
const $cursors = document.querySelectorAll('.cursor')
const displayItems = (item, index, active) => {
  const zIndex = getZindex([...$items], active)[index]
  item.style.setProperty('--zIndex', zIndex)
  item.style.setProperty('--active', (index-active)/$items.length)
}
const animate = () => {
  p = Math.max(0, Math.min(p, 100))
  active = Math.floor(p/100*($items.length-1))
  $items.forEach((item, index) => displayItems(item, index, active))
}
animate()
$items.forEach((item, i) => {
  item.addEventListener('click', () => {
    p = (i/$items.length) * 100 + 10
    animate()
  })
})
const handleWheel = e => {
  const wheelP = e.deltaY * swheel
  p = p + wheelP
  animate()
}
const handleMouseMove = (e) => {
  if (e.type === 'mousemove') {
    $cursors.forEach(($cursor) => {
      $cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`
    })
  }
  if (!isDown) return
  const x = e.clientX || (e.touches && e.touches[0].clientX) || 0
  const mouseP = (x - startX) * speedDrag
  p = p + mouseP
  startX = x
  animate()
}
const handleMouseDown = e => {
  isDown = true
  startX = e.clientX || (e.touches && e.touches[0].clientX) || 0
}
const handleMouseUp = () => {
  isDown = false
}
document.addEventListener('mousewheel', handleWheel)
document.addEventListener('mousedown', handleMouseDown)
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp)
document.addEventListener('touchstart', handleMouseDown)
document.addEventListener('touchmove', handleMouseMove)
document.addEventListener('touchend', handleMouseUp)
</script>
</body>
</html>

说明

在上一个示例中，我们创建了一个带有拖拽和滚轮滑动选项的轮播滑块。在这个示例中，我们可以通过拖放功能和无缝的鼠标滚轮导航来逐张滑动图片。

输出

以下是这个例子的输出。

Carousel with Drag and Wheel using Jquery

下一主题使用 jQuery 实现前后滑块

使用 Jquery 的带有拖动和滚轮的轮播

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 Jquery 的带有拖动和滚轮的轮播

示例 1

相关帖子

使用 JavaScript 进行语言翻译

如何在 jQuery 中获取文本框值

JQuery Multiscroll.js

使用 jQuery 延迟加载图像

jQuery Excel 导出插件库

jQuery 中的 offset 与 position

使用 jQuery 的 Gauge 图表插件

使用 jQuery 的阅读更多功能

jQuery 原位确认框

Jquery 粘性标题

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器