怎样实现H5+CSS3手指滑动切换图片的示例代码


Posted in HTML / CSS onMay 05, 2019

包含3个文件:html、slider-H5.js、jquery.js。在html中可配置滑动参数。具体代码如下:

HTML代码:

<!DOCTYPE HTML>
<html>
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta content="telephone=no" name="format-detection" />
        <meta name="keywords" content="seokeywords" />
        <meta name="description" content="seodescription" />
        <title>
            H5手指滑动切换图片
        </title>
        <style>
            ul,li{margin:0;padding:0;} @media screen and (min-width:240px) { html,
            body{ font-size:9px; } } @media screen and (min-width:320px) { html, body{
            font-size:12px; } } @media screen and (min-width:480px) { html, body{ font-size:18px;
            } } @media screen and (min-width:640px) { html, body{ font-size:24px; }
            } @media screen and (min-width:960px) { html, body{ font-size:36px; } }
            div.imgbox{width:25rem;height:16.5rem;overflow:hidden;margin:0 auto;} div.imgbox
            ul{clear:both;width:75rem;display: inline-block;} div.imgbox ul li{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;}
            div.imgbox ul li img{width:24rem;height:16.5rem;} #page{color:red;}
        </style>                   
    </head>
                                       
    <body>
        <div class="imgbox">
            <ul>
                <li>
                    <a href="#">
                        <img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f3d8533e.jpg">
                        </img>
                    </a>
                </li>
                <li>                      
                    <a href="#">
                        <img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f23aad06.jpg">
                        </img>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f345282b.jpg">
                        </img>
                    </a>
                </li>
            </ul>
        </div>
        <div>
            这里通过回调显示当前滚动到多少页:
            <span id="page">
                0
            </span>
        </div>
        <script src="jquery-1.10.2yuan.js">
        </script>
        <script src="slider-H5.js">
        </script>
        <script>
            (function() {
                /*
    注意:$.mggScrollImg返回的scrollImg对象上有
            next,prev,go三个方法,可以实现外部对滚动索引的控制。
    如:scrollImg.next();//会切换到下一张图片
        scrollImg.go(0);//会切换到第一张图片
*/
                var scrollImg = $.mggScrollImg('.imgbox ul', {
                    loop: true,
                    //循环切换
                    auto: true,
                    //自动切换
                    auto_wait_time: 3000,
                    //轮播间隔
                    scroll_time: 300,
                    //滚动时长
                    callback: function(ind) { //这里传过来的是索引值
                        $('#page').text(ind + 1);
                    }
                });
            })()
        </script>
    </body>

</html>

slider-H5.js 代码:

(function($) {
    /*
        图片滚动效果
        @jQuery or @String box : 滚动列表jQuery对象或者选择器 如:滚动元素为li的外层ul
        @object config : {
                @Number width : 一次滚动宽度,默认为box里面第一个一级子元素宽度[如果子元素宽度不均匀则滚动效果会错乱]
                @Number size : 列表长度,默认为box里面所有一级子元素个数[如果size不等于一级子元素个数,则不支持循环滚动]
                @Boolean loop : 是否支持循环滚动 默认 true
                @Boolean auto : 是否自动滚动,支持自动滚动时必须支持循环滚动,否则设置无效,默认为true
                @Number auto_wait_time : 自动轮播一次时间间隔,默认为:3000ms
                @Function callback : 滚动完回调函数,参入一个参数当前滚动节点索引值
            }
    */
    function mggScrollImg(box, config) {
        this.box = $(box);
        this.config = $.extend({},
        config || {});
        this.width = this.config.width || this.box.children().eq(0).width(); //一次滚动的宽度
        this.size = this.config.size || this.box.children().length;
        this.loop = this.config.loop !== undefined ? (this.config.loop == true ? true: false) : true; //默认能循环滚动
        this.auto = this.config.auto !== undefined ? (this.config.auto == true ? true: false) : true; //默认自动滚动
        this.auto_wait_time = this.config.auto_wait_time || 3000; //轮播间隔
        this.scroll_time = this.config.scroll_time !== undefined ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0) : 300; //滚动时长
        this.minleft = -this.width * (this.size - 1); //最小left值,注意是负数[不循环情况下的值]
        this.maxleft = 0; //最大lfet值[不循环情况下的值]
        this.now_left = 0; //初始位置信息[不循环情况下的值]
        this.point_x = null; //记录一个x坐标
        this.point_y = null; //记录一个y坐标
        this.move_left = false; //记录向哪边滑动
        this.index = 0;
        this.busy = false;
        this.timer;
        this.init();
    }                                     
    $.extend(mggScrollImg.prototype, {
        init: function() {
            this.bind_event();
            this.init_loop();
            this.auto_scroll();
        },
        bind_event: function() {
            var self = this;
            self.box.bind('touchstart',
            function(e) {
                var t = e.touches ? e.touches: e.originalEvent.targetTouches;
                if (t.length == 1 && !self.busy) {
                    self.point_x = t[0].screenX;
                    self.point_y = t[0].screenY;
                }
            }).bind('touchmove',
            function(e) {
                var t = e.touches ? e.touches: e.originalEvent.targetTouches;
                if (t.length == 1 && !self.busy) {
                    return self.move(t[0].screenX, t[0].screenY); //这里根据返回值觉得是否阻止默认touch事件
                }
            }).bind('touchend',
            function(e) { ! self.busy && self.move_end();
            });
        },
        /*
            初始化循环滚动,当一次性需要滚动多个子元素时,暂不支持循环滚动效果,
            如果想实现一次性滚动多个子元素效果,可以通过页面结构实现
            循环滚动思路:复制首尾节点到尾首
        */
        init_loop: function() {
            if (this.box.children().length > 1 && this.box.children().length == this.size && this.loop) { //暂时只支持size和子节点数相等情况的循环
                this.now_left = -this.width; //设置初始位置信息
                this.minleft = -this.width * this.size; //最小left值
                this.maxleft = -this.width;
                this.box.prepend(this.box.children().eq(this.size - 1).clone()).append(this.box.children().eq(1).clone()).css(this.get_style(2));
                this.box.css('width', this.width * (this.size + 2));
            } else {
                this.loop = false;
                this.box.css('width', this.width * this.size);
            }                           
        },
        auto_scroll: function() { //自动滚动
            var self = this;
            if (!self.auto) return;
            clearTimeout(self.timer);
            self.timer = setTimeout(function() {
                self.go_index(self.index + 1);
            },
            self.auto_wait_time);
        },
        go_index: function(ind) { //滚动到指定索引页面
            var self = this;
            if (self.busy) return;
            clearTimeout(self.timer);
            self.busy = true;
            if (self.loop) { //如果循环
                ind = ind < 0 ? -1 : ind;
                ind = ind > self.size ? self.size: ind;
            } else {
                ind = ind < 0 ? 0 : ind;
                ind = ind >= self.size ? (self.size - 1) : ind;
            }
            if (!self.loop && (self.now_left == -(self.width * ind))) {
                self.complete(ind);
            } else if (self.loop && (self.now_left == -self.width * (ind + 1))) {
                self.complete(ind);
            } else {
                if (ind == -1 || ind == self.size) { //循环滚动边界
                    self.index = ind == -1 ? (self.size - 1) : 0;
                    self.now_left = ind == -1 ? 0 : -self.width * (self.size + 1);
                } else {
                    self.index = ind;
                    self.now_left = -(self.width * (self.index + (self.loop ? 1 : 0)));
                }
                self.box.css(this.get_style(1));
                setTimeout(function() {
                    self.complete(ind);
                },
                self.scroll_time);
            }
        },
        complete: function(ind) { //动画完成回调
            var self = this;
            self.busy = false;
            self.config.callback && self.config.callback(self.index);
            if (ind == -1) {
                self.now_left = self.minleft;
            } else if (ind == self.size) {
                self.now_left = self.maxleft;
            }
            self.box.css(this.get_style(2));
            self.auto_scroll();
        },
        next: function() { //下一页滚动
            if (!this.busy) {
                this.go_index(this.index + 1);
            }
        },
        prev: function() { //上一页滚动
            if (!this.busy) {
                this.go_index(this.index - 1);
            }                                     },
        move: function(point_x, point_y) { //滑动屏幕处理函数
            var changeX = point_x - (this.point_x === null ? point_x: this.point_x),
            changeY = point_y - (this.point_y === null ? point_y: this.point_y),
            marginleft = this.now_left,
            return_value = false,
            sin = changeY / Math.sqrt(changeX * changeX + changeY * changeY);
            this.now_left = marginleft + changeX;
            this.move_left = changeX < 0;
            if (sin > Math.sin(Math.PI / 3) || sin < -Math.sin(Math.PI / 3)) { //滑动屏幕角度范围:PI/3  -- 2PI/3
                return_value = true; //不阻止默认行为
            }
            this.point_x = point_x;
            this.point_y = point_y;
            this.box.css(this.get_style(2));
            return return_value;
        },
        move_end: function() {
            var changeX = this.now_left % this.width,
            ind;
            if (this.now_left < this.minleft) { //手指向左滑动
                ind = this.index + 1;
            } else if (this.now_left > this.maxleft) { //手指向右滑动
                ind = this.index - 1;
            } else if (changeX != 0) {
                if (this.move_left) { //手指向左滑动
                    ind = this.index + 1;
                } else { //手指向右滑动
                    ind = this.index - 1;
                }
            } else {
                ind = this.index;
            }
            this.point_x = this.point_y = null;
            this.go_index(ind);
        },
        /*
            获取动画样式,要兼容更多浏览器,可以扩展该方法
            @int fig : 1 动画 2  没动画
        */
        get_style: function(fig) {
            var x = this.now_left,
            time = fig == 1 ? this.scroll_time: 0;
            return {
                '-webkit-transition': '-webkit-transform ' + time + 'ms',
                '-webkit-transform': 'translate3d(' + x + 'px,0,0)',
                '-webkit-backface-visibility': 'hidden',
                'transition': 'transform ' + time + 'ms',
                'transform': 'translate3d(' + x + 'px,0,0)'
            };
        }           

    });
    /*
        这里对外提供调用接口,对外提供接口方法
        next :下一页
        prev :上一页
        go :滚动到指定页
    */
    $.mggScrollImg = function(box, config) {
        var scrollImg = new mggScrollImg(box, config);
        return { //对外提供接口
            next: function() {
                scrollImg.next();
            },
            prev: function() {
                scrollImg.prev();
            },
            go: function(ind) {
                scrollImg.go_index(parseInt(ind) || 0);
            }
        }
    }
})(jQuery)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 #HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 #HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 #HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 #HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 #HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 #HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 #HTML / CSS
You might like
php简单静态页生成过程
2008/03/27 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
JQuery基础语法小结
2015/02/27 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
wxPython框架类和面板类的使用实例
2014/09/28 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
python如何写出表白程序
2020/06/01 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
用Python制作音乐海报
2021/01/26 Python
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
库房管理员岗位职责
2014/03/09 职场文书
家教广告词
2014/03/19 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
防汛工作情况汇报
2014/10/28 职场文书
党员剖析材料范文
2014/12/18 职场文书
物业接待员岗位职责
2015/04/15 职场文书
高一数学教学反思
2016/02/18 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript
详解非极大值抑制算法之Python实现
2021/06/28 Python
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
java开发双人五子棋游戏
2022/05/06 Java/Android