原生js实现简单的移动端轮播图效果

最新推荐文章于 2024-06-10 21:52:46 发布
最新推荐文章于 2024-06-10 21:52:46 发布
阅读量4.9k 收藏 38
点赞数 12
分类专栏： JavaScript CSS3 文章标签： js 移动端 CSS3 HTML5 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzy_csdn/article/details/83212617
版权

近期接触了移动端html5和css3，想加入些轮播图，于是在网上搜集整理了一些资料，经自己补充改进使之较为完善

原生JavaScript 移动端web轮播图片

实现功能

  1. 索引小圆点
  2. 过渡滑动动画的定时轮播
  3. 移动端可以滑动切换图片
  4. 滑动距离不够则吸附回去

效果图

代码

  1. slideshow.html 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>移动端-轮播图</title>
    <link rel="stylesheet" href="slideshow.css">
</head>
<body>
<div class="layout">
    <div class="banner">
        <ul class="swipe" id="swipe">
            <li><a href="#"><img src="images/l5.jpg"></a></li>
            <li><a href="#"><img src="images/l1.jpg"></a></li>
            <li><a href="#"><img src="images/l2.jpg"></a></li>
            <li><a href="#"><img src="images/l3.jpg"></a></li>
            <li><a href="#"><img src="images/l4.jpg"></a></li>
            <li><a href="#"><img src="images/l5.jpg"
最低0.47元/天 解锁文章
Zyaibrs
关注
  • 12
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
WebAPI第五天学习总结—— 移动端常见特效（轮播图）
weixin_52819925的博客
08-18 263
移动端常见特效 案例: 移动轮播图 需求：移动端轮播图功能和基本PC端一致 可以自动播放图片 手指可以拖动播放轮播图 案例分析： 自动播放功能 开启定时器 移动端移动，可以使用translate 移动 想要图片优雅的移动，请添加过渡效果 思路： 自动播放功能-无缝滚动 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 此时需要添加检测过渡完成事件 transitionend 判断条件：如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0 此时图片，去掉过渡效果，
JS实现某东移动web轮播图
weixin_41105030的博客
01-03 6055
移动web轮播图 参考实例，可以从中保存轮播图的图片，这里我们放入uploads的文件夹下，将八张图片一次改为l1.jpg,l2.jpg… https://m.jd.com/ HTML 这里要放入十张图片，因为手指滑动的时候要从第一张滑动到最后一张，是无缝滑动，当然可以用原生的JS进行添加 最终我们可以通过移动ul来达到轮播的效果，所以ul的宽度要刚好放得下十张图片 ol下的li是分页器，也...
js原生实现移动端手指滑动轮播图效果的示例
10-18
下面小编就为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
原生js实现移动端Touch轮播图的方法步骤
10-17
主要介绍了原生js实现移动端Touch轮播图的方法步骤，touch轮播图其实就是通过手指的滑动，来左右切换轮播图，touch轮播图其实就是通过手指的滑动，来左右切换轮播图，
JS实现移动端的轮播图滑动事件
最新发布
ggq53219的博客
06-10 338
以上代码是一个基础示例，用于展示如何使用触摸事件来创建一个简单的滑动效果。对于更复杂的需求，你可能需要考虑使用现成的轮播图库，如Swiper、Slick等。在移动端实现轮播图滑动事件，我们通常使用。
移动端轮播图HTML、CSS、JS代码全，可直接复制粘贴
HeeRing的博客
12-31 189
移动端轮播图-上行空间。
移动端网页轮播图
m0_52861684的博客
10-12 3186
移动端网页轮播图，不必考虑兼容性问题，CSS两个属性实现元素的动画效果及缓冲特效，通过 classList 属性移除、添加类名，轻松实现小圆点的跟随效果。
原生js实现轮播图功能，支持点击和手机端滑动切换图片
weixin_30733003的博客
05-25 2202
轮播图的实现原理并不难，但是步骤有些繁琐。最近练习了一个轮播图，大部分是跟着网上的教程写的，然后自己做了一点兼容ie8的修改，加了点击切换图片的特效和手机端的滑动特效，让这个轮播图可以在响应式的网站中使用，同时兼容pc端和触屏端。 轮播图的样式也分很多种，淡入淡出的轮播图很容易实现，只需要把图片全都叠在一起，让相应的图片轮流显示就行了，但是滚动能的轮播图就要复杂很多。这里介绍的是滚动的轮播图： ...
移动端轮播图（原生JS写法）
weixin_47424113的博客
02-02 3120
移动端轮播图（原生JS写法） 文章目录移动端轮播图（原生JS写法）一、实现功能：二、实现步骤三、页面布局四、焦点图模块样式五、JS逻辑代码 一、实现功能： 可以自动播放图片 手指可以拖动播放轮播图 二、实现步骤 自动播放功能： ① 开启定时器 ② 移动端移动可以使用CSS3的translate移动。注意， 使用translate不需要添加就可以移动 ③ 想要图片优雅的移动，就需要添加过渡效果 自动播放功能-无缝滚动： ① 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 ② 此时需
js-移动端轮播图
qq_61706112的博客
02-17 942
一、基本结构 1. html <div class="banner"> <ul class="lunbo clearfix"> <li><a href="#"><img src="uploads/banner3.jpg"></a></li> <li><a href="#"><img src="uploads/banner1.jpg"></
原生js面向对象书写移动端轮播图@郝晨光
qq_44492790的博客
06-27 250
先看一下效果图 该项目为仿清欢美味严选商城小程序demo 前言 轮播图的原理，其实就是一个简单的 n+2 模式，即在原有图片的基础上，再添加两张图片，以达到障眼法的效果，在这个原理方面，我就不做过多的叙述，可以自行寻找度娘，该项目使用了原生js，面向对象，移动端的touchstart，touchmove，touchend事件，有一小部分使用了ES6的语法，如箭头函数，let声明变量等等，建议有一...
一个用于原生JS的移动端的可触摸滑动的轮播控件
08-13
一个用于原生JS的移动端的可触摸滑动的轮播控件
原生JS实现轮播图（含注释）
02-23
本代码主要使用js实现网页前端上常用轮播图，代码中含有清晰注释。
HTML5+原生javascript移动端滑动banner效果demo
03-09
HTML5+原生javascript移动端滑动banner效果demo
H5+CSS+JavaScript的轮播图
01-24
这是一个HTML+CSS+JavaScript的轮播图，资源改编于网络资源，侵删。
手机端html实现滑动图片轮播完整代码，带透明圆点
01-13
手机端html实现滑动图片轮播完整代码，带透明圆点，找了好多，这是自己根据别人改好的代码，可完美移植至微信公众号，及基于html5开发的app中
原生JS实现移动端web轮播图详解（结合Tween算法造轮子）
10-19
首先，我们需要理解移动端轮播图与PC端的区别。在移动端，轮播图需要考虑到不同设备的宽度、分辨率密度（DPR）以及触摸事件的支持。这通常涉及到`touchstart`、`touchmove`和`touchend`三个触摸事件的处理。此外，...
原生H5轮播图
weixin_43506403的博客
12-22 354
轮播图
移动端轮播图实现
weixin_30679823的博客
11-08 155
1：HTML样式<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> <tit...
帮我完成移动端轮播图
06-07
移动端轮播图可以使用原生JS和CSS3来实现。下面提供一个例子[^1]，帮助你完成移动端轮播图： 1. HTML结构 ```html <div class="container"> <div class="img-box"> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> <img src="3.jpg" alt=""> <img src="4.jpg" alt=""> </div> <div class="dot-box"> <span></span> <span></span> <span></span> <span></span> </div> </div> ``` 2. CSS样式 ```css .container { width: 100%; overflow: hidden; position: relative; } .img-box { display: flex; width: 400%; transition: all .5s; } .img-box img { width: 25%; } .dot-box { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .dot-box span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; background-color: #fff; opacity: .5; cursor: pointer; } .dot-box span.active { opacity: 1; } ``` 3. JavaScript代码 ```javascript var container = document.querySelector('.container'); var imgBox = document.querySelector('.img-box'); var dots = document.querySelectorAll('.dot-box span'); var index = 0; var timer = null; var startX = 0; var startY = 0; var moveX = 0; var moveY = 0; var distanceX = 0; var distanceY = 0; // 自动轮播 timer = setInterval(function() { index++; if (index > 3) { index = 0; } changeImage(); }, 2000); // 触摸事件 container.addEventListener('touchstart', function(e) { clearInterval(timer); startX = e.touches.clientX; startY = e.touches.clientY; }); container.addEventListener('touchmove', function(e) { moveX = e.touches.clientX; moveY = e.touches.clientY; distanceX = moveX - startX; distanceY = moveY - startY; imgBox.style.transform = 'translateX(' + (-index * 100 - distanceX) / 4 + '%)'; }); container.addEventListener('touchend', function(e) { if (Math.abs(distanceX) > 50) { if (distanceX > 0) { index--; if (index < 0) { index = 3; } } else { index++; if (index > 3) { index = 0; } } } changeImage(); timer = setInterval(function() { index++; if (index > 3) { index = 0; } changeImage(); }, 2000); }); // 点击事件 dots.forEach(function(dot, i) { dot.addEventListener('click', function() { index = i; changeImage(); }); }); // 切换图片和小圆点的样式 function changeImage() { imgBox.style.transform = 'translateX(' + (-index * 100) + '%)'; dots.forEach(function(dot) { dot.classList.remove('active'); }); dots[index].classList.add('active'); } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值