輪播+滑動+返回頂部效果，插件 ...
輪播+滑動+返回頂部效果，插件
<!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>
