js 左右滑动切换图片

$('.slider').on('touchend', function (e) {
        // 判断默认行为是否可以被禁用
        if (e.cancelable) {
          // 判断默认行为是否已经被禁用
          if (!e.defaultPrevented) {
            e.preventDefault();
          }
        }
        var moveEndX = e.originalEvent.changedTouches[0].pageX;
        var moveEndY = e.originalEvent.changedTouches[0].pageY;
        if (moveEndX - startX > 0) {
          // 左滑
          if (flagImg.no > 1) {
            $('#img' + flagImg.no).hide()
            flagImg.no -= 1
            $('#img' + flagImg.no).show()
            $('#badge').html(flagImg.no + '/' + flagImg.total)
          }
        } else if (moveEndX - startX < 0) {
          // 右滑
          if (flagImg.no == flagImg.cache && flagImg.no <= flagImg.total) {
            // 请求数据
            reqData.p++
            getImg()
          } else if (flagImg.no <= flagImg.total) {
            $('#img' + flagImg.no).hide()
            flagImg.no += 1
            $('#img' + flagImg.no).show()
            $('#badge').html(flagImg.no + '/' + flagImg.total)
            if (flagImg.no == flagImg.total) {
              mui.toast('已经是最后一页了!')
            }
          }
        } else if ((moveEndX - startX == 0) && (moveEndY - startY == 0) ) {
          // 如果需要使用点击事件,操作写于此处
        }
      });

 

实现左右滑动切换图片可以使用一些现成的插件或者自己编写JavaScript代码实现。以下是一个使用JavaScript实现左右滑动切换图片的示例代码: HTML代码: ```html <div class="slider"> <div class="slider-wrapper"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <a href="#" class="slider-prev">Prev</a> <a href="#" class="slider-next">Next</a> </div> ``` CSS样式: ```css .slider { position: relative; overflow: hidden; } .slider-wrapper { display: flex; transition: transform 0.5s ease; } .slider-wrapper img { width: 100%; height: auto; } .slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; color: white; background-color: black; padding: 8px 16px; text-decoration: none; z-index: 1; } .slider-prev { left: 0; } .slider-next { right: 0; } ``` JavaScript代码: ```js const slider = document.querySelector('.slider'); const wrapper = document.querySelector('.slider-wrapper'); const prevButton = document.querySelector('.slider-prev'); const nextButton = document.querySelector('.slider-next'); let position = 0; prevButton.addEventListener('click', () => { position += slider.clientWidth; if (position > 0) { position = -wrapper.clientWidth + slider.clientWidth; } wrapper.style.transform = `translateX(${position}px)`; }); nextButton.addEventListener('click', () => { position -= slider.clientWidth; if (position < -wrapper.clientWidth + slider.clientWidth) { position = 0; } wrapper.style.transform = `translateX(${position}px)`; }); ``` 该代码实现了一个左右滑动切换图片的功能,点击“Prev”按钮可以向左切换图片,点击“Next”按钮可以向右切换图片。需要注意的是,该代码使用了flex布局和transform属性实现图片的水平布局和平移动画。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值