您的位置:首页 > Web前端 > > 正文

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

更多 时间:2021-10-01 01:16:51 类别: 浏览量:2268

h5css3图片旋转

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

包含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; } }
                li.imgbox{width:25rem;height:16.5rem;overflow:hidden;margin:0 auto;} li.imgbox
                ul{clear:both;width:75rem;display: inline-block;} li.imgbox ul li{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;}
                li.imgbox ul li img{width:24rem;height:16.5rem;} #page{color:red;}
            </style>                   
        </head>
                                           
        <body>
            <li 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>
            </li>
            <li>
                这里通过回调显示当前滚动到多少页:
                <span id="page">
                    0
                </span>
            </li>
            <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)
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    本文地址:http://www.studyofnet.com/news/1681.html