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

  • 相关阅读:
    Monogb基本概念及基本操作
    高级查询与索引
    查询、索引和聚合
    更新和删除文档
    数据查询
    数据库和集合的基本操作
    dedecms 文章排列方式
    dedecms flag标签属性
    Iis 日志文件默认路径
    php中的require() 语句的使用方法
  • 原文地址:https://www.cnblogs.com/lufy/p/2506551.html
Copyright © 2011-2022 走看看