zoukankan      html  css  js  c++  java
  • jQuery插件图片左右无缝滚动

    (function($){
        $.fn.extend({
            "slidelf":function(value){
                value = $.extend({
                    "prev":"",
                    "next":"",
                    "speed":""    
                },value)
                
                var dom_this = $(this).get(0);    //将jquery对象转换成DOM对象;以便其它函数中调用;
                var marginl = parseInt($("ul li:first",this).css("margin-left")); //每个图片margin的数值
                var movew = $("ul li:first",this).outerWidth()+marginl;    //需要滑动的数值
                
                //左边的动画
                function leftani(){
                    $("ul li:first",dom_this).animate({"margin-left":-movew},value.speed,function(){
                            $(this).css("margin-left",marginl).appendTo($("ul",dom_this));    
                    });    
                }
                //右边的动画
                function rightani(){
                    $("ul li:last",dom_this).prependTo($("ul",dom_this));
                    $("ul li:first",dom_this).css("margin-left",-movew).animate({"margin-left":marginl},value.speed);
                }
                
                //点击左边
                $("."+value.prev).click(function(){
                    if(!$("ul li:first",dom_this).is(":animated")){
                        leftani();
                    }    
                });
                
                //点击左边
                $("."+value.next).click(function(){
                    if(!$("ul li:first",dom_this).is(":animated")){
                        rightani();
                    }    
                })
            }    
        });    
    })(jQuery)

    思路:

      点击左边--

      1.将第一个LI向左滑动,滑动的数值就是LI的宽度。(这里是用负margin-left来实现移动。)

      2.滑动完成后,将这个LI插入到整个LI的最后一个(实现无缝滚动)

      点击右边--

      1.将最后一个LI插入到所有LI的第一个,并将其定位到可见区域之外,(这里用的是margin)

      2.再将其滑动到可见区域。

    注意:这里的IF判断语句,是为了防止连续点击“左”或“右”的铵钮,而出现的BUG;

      这判断的意思:只有当LI不处于动画状态时,才执行移动函数。只要处于动画状态,点击时,任何事都不发生。

     

    下载DEMO

  • 相关阅读:
    谈谈Nginx有哪些特点
    网站嵌入百度地图制作
    8张图理解Java
    linux问题-easy_install安装bpython时报错
    linux问题-Centos 安装Sublime text 3
    python例子-Nmap扫描IP并更新
    python例子-PyQuery抓取信息.
    python例子-MySQLdb和练习题
    python例子-线程和队列
    mysql问题-centos7中mysql远程连接问题
  • 原文地址:https://www.cnblogs.com/lufy/p/2506551.html
Copyright © 2011-2022 走看看