jQuery -- touch事件之轮播图效果

最新推荐文章于 2024-08-04 20:14:57 发布

豆i浆

最新推荐文章于 2024-08-04 20:14:57 发布

阅读量2.4k

点赞数

分类专栏： jQuery javascript css3 html5 移动端文章标签：移动轮播

本文链接：https://blog.csdn.net/sinat_19327991/article/details/73844793

版权

本文通过jQuery详细讲解了如何在移动设备上创建轮播图效果，结合touch事件，实现平滑的触控滑动体验。提供了一张预览效果图，并给出了相关touch事件的基础教程链接。

摘要由CSDN通过智能技术生成

废话不多说，下面放代码，注释很详细，不怕看不懂

效果图预览：

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .content{
                position: relative;
                width: 100%;
                overflow: hidden;
            }
            .net{
                -webkit-transition-timing-function: ease-out;
                -moz-transition-timing-function: ease-out;
                -ms-transition-timing-function: ease-out;
                -o-transition-timing-function: ease-out;
                transition-timing-function: ease-out;
                -webkit-transform: translate3d(0,0,0);
                -moz-transform: translate3d(0,0,0);
                -o-transform: translate(0,0);
                -ms-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
                -webkit-transition-property: -webkit-transform;
                -moz-transition-property: -moz-transform;
                -o-transition-property: -o-transform;
                -ms-transition-property: -ms-transform;