輪播+滑動+返回頂部效果，插件

来源:http://www.cnblogs.com/zhongmeizhi/archive/2017/05/16/6860169.html
-Advertisement-
Play Games

輪播+滑動+返回頂部效果，插件 ...


輪播+滑動+返回頂部效果，插件

 

<!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>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 出爐！可一鍵運行演示的SSO完整代碼 | 手把手教單點登錄系列三
    感謝各位的不吝推薦，本系列前兩篇均有幸榮登博客園推薦排行榜。今天去看，第二篇還排在第二名。 周末把完整的代碼整理完了，請下載體驗。為方便大家，做了“一鍵配置運行.exe”，運行即自動完成所有相關部署配置工作，並打開瀏覽器訪問相應站點。 大家運行遇到問題的，請在本文回覆交流。 ...
  • js字元串與Unicode編碼互相轉換
    這段代碼的意思是，把字元'好'轉化成Unicode編碼， 看看charCodeAt()是怎麼個意思 等於就是'charCodeAt()'裡面的這個參數是指定位置的單個字元， 上面這段代碼就可以看出，一個字元串你想要知道單個字元的編碼，就是靠裡面的這個參數，也就是索引 要是想把unicode解碼成字元 ...
  • jquery插件－fullpage.js
    1⃣️ 簡介 fullPage.js 是一個基於 jQuery 的插件，它能夠很方便、很輕鬆的製作出全屏網站，主要功能有： 支持滑鼠滾動 支持前進後退和鍵盤控制 多個回調函數 支持手機、平板觸摸事件 支持 CSS3 動畫 支持視窗縮放 視窗縮放時自動調整 可設置滾動寬度、背景顏色、滾動速度、迴圈選項 ...
  • 使用npm安裝github倉庫中的代碼
    我們在使用npm下載包的時候，一般是下載在npm官網發佈過的。可以指定版本，指定依賴等等。 但是，對於一個團隊或公司，需要從自己的工作賬號拉取代碼，npm是直接支持從git倉庫安裝的。 最近遇到的一個問題，只能從我自己fork的vue2-scrollbar項目安裝。雖然已有人PR，但是作者不更新了。 ...
  • position佈局影響點擊事件以及冒泡獲取事件目標
    在編寫功能時總是會出現很多意想不到的問題，現在就講講我遇到的兩個問題，通過舉一個相似的例子來解說。 <1> 元素互相獨立，不存在包含於被包含 選擇城市的按鈕，為它綁定點擊事件，點擊後就彈出城市列表層，城市列表層設置了position與z-index的值來進行佈局，然後再點擊選擇城市按鈕，點擊事件就不 ...
  • 前端知識圖譜
    綜合類 前端知識體系 前端知識結構 Web前端開發大系概覽 Web前端開發大系概覽-中文版 Web Front-end Stack v2.2 免費的編程中文書籍索引 前端書籍 前端免費書籍大全 前端知識體系 免費的編程中文書籍索引 智能社 - 精通JavaScript開發 重新介紹 JavaScri ...
  • 用 Vue 全家桶二次開發 V2EX 社區
    界面設計簡潔，沉浸式的閱讀體驗，可以按分類/文章/用戶瀏覽，在文章頁顯示用戶評論，圖片使用懶載入模式，總之，實現了你看帖所需要的一切。項目基於Vue全家桶，適配移動端，有完善的文檔註釋。 ...
  • jquery源碼 DOM載入
    jQuery版本：2.0.3 DOM載入有關的擴展 isReady:DOM是否載入完（內部使用） readyWait:等待多少文件的計數器（內部使用） holdReady():推遲DOM觸發 ready():準備DOM觸發。 jQuery.ready.promise=function(){}; 監聽 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類