zoukankan      html  css  js  c++  java
  • [Jquery]焦点图轮播效果

    $(function(){
        var $next=$(".right");
        var $prev=$(".left");
        var $list_num=$(".list-num a");
        var $banner=$(".banner");
        var $list_banner=$(".list-banner");
        var index=1;
        var timer;
        var $list_img_f=$(".list-banner li:first");
        var $list_img_l=$(".list-banner li:last");
        $list_img_f.clone(true).appendTo($list_banner);
        $list_img_l.clone(true).prependTo($list_banner);
        
        function showDot($obj){
            $obj.addClass("hover").siblings().removeClass("hover");    
        }
        
        function startMove(i){
            $list_banner.stop().animate({left:-i*624},300,function(){
                if(i<1){
                    showDot($list_num.eq(3));
                }
                else if(i>4){
                    showDot($list_num.eq(0));
                }
                else{
                    showDot($list_num.eq(i-1));
                }
                if(i<1){
                    $list_banner.css("left",-2496);
                    index=4;
                }
                else if(i>4){
                    $list_banner.css("left",-624);
                    index=1;
                }
            });
            
        }
        function autoPlay(){
            timer=setInterval(function(){
                $next.click();
            },2000);
        }
        autoPlay();
        $next.click(function(){
            if(!$list_banner.is(":animated")){           //如果先index++再执行startMove(index);会有点问题,点的快某个点会跳过
                startMove(++index);
            }
        });
        $prev.click(function(){
            if(!$list_banner.is(":animated")){
                startMove(--index);
            }
        });
        $list_num.click(function(){
            var i=$(this).index()+1;
            index=i;
            startMove(i);
        });
    });

    和js的区别:用.animate()方法代替js里要算的速度,每次滑行距离以及定时器setTimeout

  • 相关阅读:
    基于Tire树和最大概率法的中文分词功能的Java实现
    通过 Spring RestTemplate 调用带请求体的 Delete 方法(Delete With Request Body)
    《高效能程序员的修炼》之译者序(本书将于7月初上市,人民邮电出版社)
    JVM类加载过程学习总结
    Web安全之Cookie劫持
    2016第40周五
    年轻By塞缪尔·厄尔曼
    2016第40周三
    2016第40周二
    果断歌
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3824869.html
Copyright © 2011-2022 走看看