用js实现简单的移动端轮播图

最新推荐文章于 2022-11-24 15:09:55 发布
最新推荐文章于 2022-11-24 15:09:55 发布
阅读量129 收藏 2
点赞数 1
文章标签： javascript android ios css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52802640/article/details/117407350
版权

主要原理：

先创建一个定时器，每两秒就执行一次，利用transform的translateX属性让ul动起来，translateX的属性值为-index去乘以大盒子的offsetWidth，因为图片是向右走，记得加负号；index是自己定义的一个值，然后让index++，图片就可以自动播放了。

如果index大于你的图片的数量，就让index = 0;再执行transform的translateX，这样就可以做到无缝轮播。

最后再利用classList的remove和add属性实现ol的小圆跟随对应的图片动起来。

简单的移动端轮播图就完成了。

html代码如下：

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="./index.css">

    <script src="./index.js"></script>

</head>

 

<body>

    <div class="father">

        <ul class="son">

 

            <li><img src="../images/1.jpg" alt=""></li>

            <li><img src="../images/2.jpg" alt=""></li>

            <li><img src="../images/3.jpg" alt=""></li>

            <li><img src="../images/4.jpg" alt=""></li>

            <li><img src="../images/1.jpg" alt=""></li>

        </ul>

        <ol>

            <li class="bianhua"></li>

            <li></li>

            <li></li>

            <li></li>

        </ol>

    </div>

</body>

</html>

css代码如下：

* {

    margin: 0;

    padding: 0;

}

 

.son>li>img {

    width: 600px;

    height: 250px;

}

 

li {

    list-style: none;

}

 

.father {

    width: 600px;

    height: 250px;

    position: relative;

    margin: 100px auto;

    border-radius: 20px;

    overflow: hidden;

}

 

.son {

    width: 600%;

    position: absolute;

    left: 0;

    top: 0;

}

 

.son>li {

    float: left;

}

 

ol {

    position: absolute;

    right: 20px;

    bottom: 10px;

    margin: 0;

}

 

ol>li {

    display: inline-block;

    width: 10px;

    height: 10px;

    background-color: red;

    border-radius: 50%;

}

 

.bianhua {

    width: 15px;

    height: 10px;

    border-radius: 10px;

}

js代码：

window.addEventListener('load', function() {

 

    var father = document.querySelector('.father');

    var ul = document.querySelector('.son');

    var w = father.offsetWidth;

    var ol = father.children[1];

    var index = 0;

    var itmer = setInterval(function() {

        index++;

        var translatex = -index * w;

        ul.style.transition = 'all .3s';

        ul.style.transform = 'translateX(' + translatex + 'px)';

    }, 2000);

    ul.addEventListener('transitionend', function() {

        if (index >= 4) {

            index = 0;

            ul.style.transition = 'none';

            var translatex = -index * w;

            ul.style.transform = 'translateX(' + translatex + 'px)';

        }

        ol.querySelector('li.bianhua').classList.remove('bianhua');

        ol.children[index].classList.add('bianhua');

    })

})

对方正在寻找表情包...
关注
JavaScript 轮播图（移动端）
m0_57835615的博客
06-02 297
功能如下： 1.自动循环播放，小圈随图片切换颜色 2.点击左右按钮，切换图片 3.点击小圆圈可切换至对应的图片 完整代码
photoSlider-原生js移动开发轮播图、相册滑动插件
u011234354的专栏
03-26 2578
今天有时间写了个简单的web移动端滑动切换相册图片插件，忘大家指点。 分别引用css文件和js文件 如： html部分: 初始化javascript代码: window.onload=function(){ photoSlide({ wrap: document.getElementById('photo'),//最外层容器 loop: true,//设置无缝
js-移动端轮播图
qq_61706112的博客
02-17 968
一、基本结构 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"></
WebAPI第五天学习总结—— 移动端常见特效（轮播图）
weixin_52819925的博客
08-18 272
移动端常见特效 案例: 移动轮播图 需求：移动端轮播图功能和基本PC端一致 可以自动播放图片 手指可以拖动播放轮播图 案例分析： 自动播放功能 开启定时器 移动端移动，可以使用translate 移动 想要图片优雅的移动，请添加过渡效果 思路： 自动播放功能-无缝滚动 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 此时需要添加检测过渡完成事件 transitionend 判断条件：如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0 此时图片，去掉过渡效果，
html 轮播_js如何实现移动端Touch轮播图？（代码示例）
weixin_39619270的博客
12-01 593
本篇文章给大家带来的内容是介绍js实现移动端Touch轮播图的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Touch 轮播图touch轮播图其实就是通过手指的滑动，来左右切换轮播图，下面我们通过一个案例，来实现下。1. html 结构结构上，还是用ul、li来存放轮播图片，ol、li来存放轮播小圆点：2. 样式初始化html的一些标签，都会有一些默认样式，比如body标签默...
js实现移动端轮播图效果
10-19
在标题“js实现移动端轮播图效果”中，提到的核心知识点包括JavaScript编程语言、移动端开发、以及轮播图的实现。移动端开发需要考虑到不同设备的屏幕尺寸、触摸操作的特点，这些因素对实现一个流畅和易用的轮播图...
js实现移动端轮播图
10-17
以下是一个关于如何使用JavaScript实现移动端轮播图的详细解释。 首先，我们来看一下HTML结构。一个简单的轮播图会包含一个容器元素，如`<div class="jd_banner">`，以及一系列的图片列表项，这些列表项通常包裹在`...
vue移动端轮播图（触摸滑动滚动、自动轮播、无缝滚动、循环无回滚）
02-11
本项目是基于Vue.js框架实现的移动端轮播图，具备了触摸滑动滚动、自动轮播、无缝滚动以及循环无回滚等功能，非常适合前端初学者进行学习和实践。 首先，我们要理解Vue.js的基础概念。Vue.js是一个轻量级的前端框架...
JavaScript实现移动端轮播效果
10-19
在当前的移动互联网时代，轮播图是一种常见的交互设计，用于在有限的页面空间内展示更多的内容。...希望以上内容能够帮助有兴趣的开发者更加深入地理解和掌握JavaScript实现移动端轮播效果的方法。
js案例:移动端轮播图
m0_63400611的博客
03-03 482
分析 可以自动播放图片 手指可以拖动播放轮播图
移动端的纯js轮播图插件
08-16
slider是一款支持移动端的纯js轮播图插件，该轮播图插件支持任何HTML标签，可以自定义分页标签和Loading效果，支持在前端框架如react中使用。
手机移动端轮播图切换js插件
12-18
超好用的 手机移动端轮播图切换js插件，支持 多图轮播，无缝切换
JS实现移动端无缝轮播图
m0_65764038的博客
08-31 196
【代码】JS实现移动端无缝轮播图。
移动端轮播图（原生JS写法）
weixin_47424113的博客
02-02 3247
移动端轮播图（原生JS写法） 文章目录移动端轮播图（原生JS写法）一、实现功能：二、实现步骤三、页面布局四、焦点图模块样式五、JS逻辑代码 一、实现功能： 可以自动播放图片 手指可以拖动播放轮播图 二、实现步骤 自动播放功能： ① 开启定时器 ② 移动端移动可以使用CSS3的translate移动。注意， 使用translate不需要添加就可以移动 ③ 想要图片优雅的移动，就需要添加过渡效果 自动播放功能-无缝滚动： ① 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 ② 此时需
使用移动端js实现无缝轮播图效果
最新发布
zhuxiaohuai的博客
11-24 476
使用移动端js实现无缝轮播图效果。
Js移动端轮播图
weixin_46513544的博客
04-24 236
移动端轮播图与PC端基本一致 自动播放图片 但可以1、可以自动播放图片 2、开启定时器 3、移动端移动，可以用translate移动 无缝滚动 4、自动无缝播放 5、等到过渡完成之后再去判断 6、添加检测过渡完成事件 transtionend 7、判断条件：如果索引号等于3，走到最后这一张，此时索引号就要复原为0 8、去掉过渡，重新计算index=0重新开始 9、如果索引号小于0，说明反方向走，让...
JS---使用swiper制作移动端轮播图
bjsyc123456的博客
11-16 449
进入官网下载swiper插件 插件下载地址 加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件 <!-- 引入swipercss文件 --> <link rel="stylesheet" href="swiper/swiper-bundle.min.css"> <!-- 引入swiper js 文件 --> <script src="swiper/swipe..
js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
phoebemeng的博客
07-22 377
移动端触屏事件+移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
原生JS实现移动端Touch轮播图的步骤解析
"原生js实现移动端Touch轮播图的方法步骤" 在移动设备上，触摸交互是用户界面设计的重要组成部分，特别是在构建轮播图时。原生JavaScript实现的移动端Touch轮播图利用用户的触摸手势（如滑动）来切换图片，提供更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值