0199 移动端 之 轮播图

1.2.1 案例: 移动轮播图

移动端轮播图功能和基本PC端一致。

  1. 可以自动播放图片
  2. 手指可以拖动播放轮播图

1.2.2 案例分析

  1. 自动播放功能
  2. 开启定时器
  3. 移动端移动,可以使用translate 移动
  4. 想要图片优雅的移动,请添加过渡效果
  5. 自动播放功能-无缝滚动
  6. 注意,我们判断条件是要等到图片滚动完毕再去判断,就是过渡完成后判断
  7. 此时需要添加检测过渡完成事件? transitionend?
  8. 判断条件:如果索引号等于 3 说明走到最后一张图片,此时 索引号要复原为 0
  9. 此时图片,去掉过渡效果,然后移动
  10. 如果索引号小于0, 说明是倒着走, 索引号等于2
  11. 此时图片,去掉过渡效果,然后移动


1.2.3 classList 属性

classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。

该属性用于在元素中添加,移除及切换 CSS 类。有以下方法

添加类:

element.classList.add(’类名’);

focus.classList.add('current');

移除类:

element.classList.remove(’类名’);

focus.classList.remove('current');

切换类:

element.classList.toggle(’类名’);

focus.classList.toggle('current');

注意:以上方法里面,所有类名都不带点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .bg {
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="one two"></div>
    <button> 开关灯</button>
    <script>
        // classList 返回元素的类名
        var div = document.querySelector('div');
        // console.log(div.classList[1]);
        // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
        div.classList.add('three');
        // 2. 删除类名
        div.classList.remove('one');
        // 3. 切换类
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            document.body.classList.toggle('bg');
        })
    </script>
</body>

</html>

1.2.4. 案例分析

  1. 小圆点跟随变化效果
  2. 把ol里面li带有current类名的选出来去掉类名 remove
  3. 让当前索引号的小li 加上 current?? add
  4. 但是,是等着过渡结束之后变化,所以这个写到 transitionend 事件里面

  1. 手指滑动轮播图
  2. 本质就是ul跟随手指移动,简单说就是移动端拖动元素
  3. 触摸元素touchstart:? 获取手指初始坐标
  4. 移动手指touchmove:? 计算手指的滑动距离,并且移动盒子
  5. 离开手指touchend:?? 根据滑动的距离分不同的情况
  6. 如果移动距离小于某个像素? 就回弹原来位置
  7. 如果移动距离大于某个像素就上一张下一张滑动。
  8. 滑动也分为左滑动和右滑动判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑
  9. 如果是左滑就播放下一张 (index++)
  10. 如果是右滑就播放上一张? (index--)

原文地址:https://www.cnblogs.com/jianjie/p/12194376.html

时间: 2024-10-06 15:26:21

0199 移动端 之 轮播图的相关文章

原生js实现移动端Touch轮播图的方法步骤

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* 清除标签默认边距 */ body,ul,li,ol,im

JavaScript实战项目:移动端 Touch 轮播图

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"

第124天:移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一.基本的轮播图实现 HTML代码 1 <!-- 2 以下容器就是整个轮播图组件的整体, 3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 4 bootstrap.js

pc端广告轮播图

<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>轮播</title> <style> body{ margin:0; } .banner { width: 100%; position: relative; overflow:hidden; } .banner ul { width: 100%; height:500px; } .b

移动端上轮播图无缝滚动原理

和pc上的不同点是,在移动端,用户按下一张图我们不知道用户会往哪里划,往左往右都有可能 假设两组完全一样的图,每组三个 第一张图和张图有被拖出去风险 解决办法,当手指按到第一张图的时候,立马把它变成第四张图, 当手指按到第六张图的时候,立马把它变成第三张图 这样就不会有被拖出去的风向 再说一下querySelectorAll()选择器的问题 当下面的东西改了,这个选择器不会重新计算,多少个还是多少个 所以要用querySelectorAll一定是当整个dom都修改完了才用这个选择器

10个免费的响应式jQuery Carousel 轮播图插件

jQuery Carousel 轮播图插件可以给网站创建华丽的动画效果,这里列出的10个jQuery Carousel 轮播图插件都是响应式的,并且可以免费使用. 1. ItemSlide.js 简单的触摸式Carousel 轮播图插件,提供多种样式的旋转动画,如向上滑动,基于全屏的触摸滑动,左右滑动等. 2. Liquid 每当Liquid 容器的大小改变时,都会重新调整列表中的项目数,以适应新的宽度. 3. jCarousel jCarousel 是一个用来控制水平或垂直方向上列表项的jQu

微信浏览器轮播图的使用经验

最近在搞微信,不得不吐槽下微信的网页的开发不比考虑那么多的网页的兼容性,因为微信一致使用的是QQ浏览器内核,但是不得不说,这个浏览器很操蛋... 在移动端的轮播图有很多种,我们的一个大牛使用的是unslider.js.手势事件(touch事件)用的是jquery.event.swipe.(曾经我使用过zepto提供的touch.js,但是在微信浏览器里超难用,还不如toucher.js.在其他地方是否好用,就不造了.) 网上说unslider.js可以自动响应容器大小布局,这个确实存在.但是在微

photoSlider-原生js移动开发轮播图、相册滑动插件

详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /><script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8&q

photoSlider-html5原生js移动开发轮播图-相册滑动插件

简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8">