IT狗

轮播+滑动+前往顶部后果,插件

轮播+滑动+前往顶部后果,插件

 

<!doctype html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title>    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body><style type="text/css">    *{        border: 0;        margin: 0;        padding: 0;        outline: 0;    }    ul{        font-size: 0;        list-style: none;        position: relative;    }    li{        display: inline-block;    }    li img{        width: 210px;    }    .left,.right{        cursor: pointer;        position: absolute;        top: 20px;    }    .sld{        position: relative;        overflow: hidden;        width: 840px;        margin: auto;    }</style>    <div class="sld">        <ul>            <li><img src="img/img_14.jpg"/></li>            <li><img src="img/img_14.jpg"/></li>            <li><img src="img/img_14.jpg"/></li>            <li><img src="img/img_14.jpg"/></li>            <li><img src="img/img_14.jpg"/></li>            <li><img src="img/img_14.jpg"/></li>            <li><img src="img/img_14.jpg"/></li>            <li><img src="img/img_14.jpg"/></li>        </ul>    </div>    <div class="left"></div>    <div class="right" style="right: 20px;"></div>                <script type="text/javascript">            $(function(){                $("ul").jslider("li",4,2,$(".left"),$(".right"));                $("#arrow").jscroll();            });            $.fn.extend({                jslider:function(dom,num,queue,leftEle,rightEle){                    var $ul = this;                    var wd = parseInt($(dom).width());// 界说主框宽度 - -.!可以在css中设置很大就能不界说了。                    $ul.width(wd*num*(queue+1))// 将末了一个行列复制到最后面                    $li = $ul.children(dom+":gt("+(num*queue-num-1)+")").clone().prependTo($ul);// 开端点击事件                    leftEle.on("click",function(){                        if(!$ul.is(":animated")){// 到达到最左边再点击按钮间接跳到第一行列。                            if(parseInt($ul.css("left"))==(-wd*num*queue)){                                $ul.css("left","0");                            }// 一般履行动画//    断定残剩个数,假如少于4个就只转动残剩数量                            var lf = parseInt($ul.css("left"));                            var surplus = (wd*num*queue + lf)/wd;                            var actualNum = num < surplus ? num : surplus;                            $ul.animate({"left":"-="+wd*actualNum},"low");                        }                    });                    rightEle.on("click",function(){                        if(!$ul.is(":animated")){                            if(parseInt($ul.css("left"))==0){                                $ul.css("left","-"+wd*num*queue+"px");                            }                            var lf = parseInt($ul.css("left"));                            var surplus = -lf/wd;                            var actualNum = num < surplus ? num : surplus;                            $ul.animate({"left":"+="+wd*actualNum},"low");                        }                    })//  轮回和停止轮回//                    var sr = setInterval(function(){//                        rightEle.click();//                    },2000);//                    eh($ul);//                    eh(leftEle);//                    eh(rightEle);//                    function eh(ele){//                        ele.hover(function(){//                            clearInterval(sr);//                        },function(){//                            sr = setInterval(function(){//                                rightEle.click();//                            },2000);//                        })//                    };//     touch事件                    var xStart,xEnd,xM,mr,lf,unApex,mv;                    $ul.on("mousedown",function(e){//    获得x坐标,制止默许事件                        xStart = e.pageX;                        e.preventDefault();                        mr = true;                        lf = parseInt($ul.css("left"));                    }).on("mousemove",function(e){                        if(mr){                            xM = e.pageX-xStart;//    断定是不是达到极点,转动间隔为鼠标滑动间隔的 1.8倍                            unApex = (lf+xM*1.8)>=(-wd*num*queue)&&(lf+xM*1.8)<0;                            if(unApex){                                $ul.css("left",lf+xM*1.8);                            }                            mv = true;                        }                    }).on("mouseleave mouseup",function(e){                        xEnd = e.pageX;//    舍入,显现完备产物                        var abs = Math.round((lf+xM*1.8)/wd)*wd;//    假如要履行 moseup动画必必要有mousemove事件                        if(unApex&&mv){                            $ul.animate({"left":abs},"fast");                        }                        mv = mr = false;                    })                }//  转动到最顶部                ,jscroll:function(){                    var $arrow = this;                    $(window).on("scroll",function(){                    var windH = $(window).height();                    var scollH = $(window).scrollTop();                    var $body = $("body");                    if(scollH>windH){                        $arrow.css("display","block");                    }else{                        $arrow.css("display","none");                    }                    if(scollH==0){                        $body.animate().stop(true,true);                    }                    $arrow.on("click",function(){                        $body.animate({scrollTop:0}, 'slow');                    })                })                }            })        </script></body></html>

此文由 IT狗 编辑,本网站所发布展示的作品/文章版权归原作者所有,任何商业用途均须联系作者!

相关推荐

评论 暂无评论