jq跑马灯效果,HTML5图片滑块动画

Posted by

 

在网站开辟进度中,非常是前端开辟这块,平常会选拔到比较多图片滑块动画,约等于一些基于jQuery和HTML5的要点图插件。本文将为大家采摘11个比比较赞的jQuery图片滑块动画,那个现存的jQuery插件将为你节省无尽付出时间,何况成效都还不易,一同来欣赏一下吗。

最近公司出品有个无缝循环滚动的广告跑马灯要做,最初河想到的是<marquee>标签,但在PC端寻常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其它一些手机寻常,但一到安卓广告屏上就跑不动了;后来领导找了个jQuery插件,经测验,完美启动。

1、jQuery/HTML5超炫全屏核心图插件

 

此次我们要来分享一款特别灿烂的jQuery主旨图插件,同偶然候那款大旨图也利用了HTML5和CSS3的相干特性,使图片切换效果更是丰富多彩。其余,那款jQuery主旨图插件的风味是全屏的功能,因而看上去也十分的大批量和完整。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动文字jquery插件</title>
    /**
    * author ormin
    * http://www.cnblogs.com/kangaoxiaoshi/p/5431870.html
    * http://www.cnblogs.com/yexiaochai/p/3759959.html
    * http://www.cnblogs.com/axl234/p/5780432.html
    */
    <script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        (function($) {
            $.fn.extend({
                roll: function(options) {
                    var defaults = {
                        speed:1
                    };
                    var options = $.extend(defaults, options);
                    var speed=(document.all) ? options.speed : Math.max(1,options.speed-1);
                    if ($(this) == null) return ;
                    var $container = $(this);
                    var $content = $("#content");
                    var init_left = $container.width();
                    $content.css({left:parseInt(init_left) + "px"});
                    var This = this;
                    var time = setInterval(function(){This.move($container,$content,speed);},20); //setInterval会改变this指向,即使加了This=this,也要用匿名函数封装,这里调试了n久

                    $container.bind("mouseover",function()
                    {
                        clearInterval(time);
                    });
                    $container.bind("mouseout",function()
                    {
                        time = setInterval(function(){This.move($container,$content,speed);},20);
                    });

                    return this;
                },
                move:function($container,$content,speed){
                    var container_width = $container.width();
                    var content_width = $content.width();
                    if (parseInt($content.css("left")) + content_width > 0)
                    {
                        $content.css({left:parseInt($content.css("left")) - speed + "px"});
                    }
                    else
                    {
                        $content.css({left:parseInt(container_width) + "px"});
                    }
                }
            });
        })(jQuery);
        //插件的调用$("#yourId").roll({speed:#yourSpeed});
        $(document).ready(
                function(){
                    $("#container").roll({speed:8});
                }
        );
    </script>
    <style type="text/css">
        #container{
            background:#CCCCCC;
            position:relative;
            overflow:hidden;  /*这个东西折腾了很久才弄出来*/
            width:550px;
            height:80px;
            line-height:80px;
            margin:100px;
        }

        #content{
            position:absolute;
            left:0;
            top:0;
            white-space:nowrap;   /*重要,不然文字显示效果不好*/
        }
    </style>

</head>

<body>
<div id="container">
    <div id="content" style="color:red;font-size:80px;">This is a roll word test,created by Baidu FE.</div>
</div>
</body>
</html>

2、jQuery自动轮播图片宗旨图插件

  jQuery部分(使用时先引用jQuery插件)

那是一款特别实用的jQuery宗旨图插件,和任何的jQuery核心图插件一样,它同样帮助多张图纸的随机跳转切换,同时,核心图切换格局是水平的,而且极度流利,因为那款jQuery主题图实现很简短。

(function($) {
    $.fn.extend({
        roll: function(options) {
            var defaults = {
                speed:1
            };
            var options = $.extend(defaults, options);
            var speed=(document.all) ? options.speed : Math.max(1,options.speed-1);
            if ($(this) == null) return ;
            var $container = $(this);
            var $content = $("#content");
            var init_left = $container.width();
            $content.css({left:parseInt(init_left) + "px"});
            var This = this;
            var time = setInterval(function(){This.move($container,$content,speed);},20); //setInterval会改变this指向,即使加了This=this,也要用匿名函数封装,这里调试了n久

            $container.bind("mouseover",function()
            {
                clearInterval(time);
            });
            $container.bind("mouseout",function()
            {
                time = setInterval(function(){This.move($container,$content,speed);},20);
            });

            return this;
        },
        move:function($container,$content,speed){
            var container_width = $container.width();
            var content_width = $content.width();
            if (parseInt($content.css("left")) + content_width > 0)
            {
                $content.css({left:parseInt($content.css("left")) - speed + "px"});
            }
            else
            {
                $content.css({left:parseInt(container_width) + "px"});
            }
        }
    });
})(jQuery);

3、协助鼠标拖拽滑动的jQuery主题图

  

别的一款jQuery大旨图插件,它的表征是永葆鼠标拖拽滑动,所以在移动器材上采纳更为方便人民群众,你假使用指头滑动显示器就可以切换图片。

 

4、jQuery垂直滑动切换主旨图动画

那是一款jQuery垂直滑动切换的难点图动画,整个jQuery主旨图是宽屏的,显得比一点都不小方。

5、jQuery宽屏自动播放大旨图插件

那是一款宽屏且能够自动播放图片的jQuery大旨图插件,一样的,在图纸切换的时候会现出上一张和下一张的部分图片,完成三张图纸之间的左右滑行切换。

6、宽屏可左右切换的jQuery主题图插件

那是一款很不利的jQuery主题图插件,它是宽屏展示的,何况有三个大气的开关用来左右切换图片。

7、HTML5移动端图片左右切换动画

那是一款很精确的图形左右切换大旨图动画,並且辅助活动端触摸滑动。效用上,那款HTML5图纸播放器支持鼠标滑动、手提式有线电电话机端触摸滑动以及自动播放。外观上,那款HTML5图片切换动画的两侧有淡化处理,因而更显立体效果。

8、自适应jQuery主旨图插件援救活动端触摸

那是一款很灵活的jQuery宗旨图插件,和从前介绍的jQuery宗旨图动画类似,它也提供左右切换开关,同期在图纸上漂移自定义图片切换按键。切换动画满含前后左右切入动画以及淡入淡出动画。那款jQuery大旨图最大的特征是协助移动端触摸成效。

9、jQuery可自动播放动画的标准图插件

那是一款能够自动播放动画的jQuery主题图插件,它在切换图片的时候能够播放对应图片的各个卡通效果。

10、jQuery全屏广告图片主旨图

全屏的jQuery主题图插件在后面我们曾经介绍过众多了,比如jQuery全屏滑块主题图可自定义内容。前几天我们要介绍的那款jQuery全屏广告图片主旨图插件也十三分不易,图片切换时有淡出剥离的卡通效果,况兼也一定流畅。

上述就是13个超级赞的jQuery图片滑块动画,希望对你富有扶助。

想要相当多项目实战的源码学习,能够来笔者的web前端学习群,群里每日都有对应资料学习:621071874,款待初学和进级中的小同伙。

一经想见见越来越系统的篇章和读书格局经验能够关切的微时域信号:‘web前端EDU’或然‘webxh5’关怀后复苏‘2017’能够领取一套完整的读书录像

相关文章

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注