2. 程式人生 > >仿京東輪播圖詳解版jQuery

仿京東輪播圖詳解版jQuery

阿新 • • 發佈：2019-02-02
$(function () { var index = 0;//用index記錄下標,預設為0 var lis = $('.slider li'); //1.右邊箭頭點選事件 $('.arrow-right').click(right); //右箭頭點選事件處理函式 function right() { index++; //如果當前是最後一張,此時index=lis.length-1,index++後index=lis.length // 此時應讓index=0 if (index == lis.length) { index = 0
; } //顯示對應下標的圖片,讓其他兄弟隱藏 lis.eq(index).fadeIn().siblings().fadeOut(); //給對應下標的小圓點按鈕新增current類名,其他兄弟移除current類名 $('.focus i').eq(index).addClass('current').siblings().removeClass('current'); } //2.左邊箭頭點選事件 $('.arrow-left').click(function () { index--; //如果當前是第一張(index=0),index--後,index<0,此時應顯示最後一張,讓index=lis.length-1
if (index < 0) { index = lis.length - 1; } //顯示對應下標的圖片,讓其他兄弟隱藏 lis.eq(index).fadeIn().siblings().fadeOut(); //給對應下標的小圓點按鈕新增current類名,其他兄弟移除current類名 $('.focus i').eq(index).addClass('current').siblings().removeClass('current'); }) //3.底部圓點按鈕滑鼠移入事件
btns = $('.focus i'); for (var i = 0; i < btns.length; i++) { //設定index屬性,記錄當前下標 btns.eq(i).attr('index', i); //給btn註冊滑鼠移入事件 btns.eq(i).mouseenter(fn); } //btn的事件處理函式 function fn() { var index = $(this).attr('index'); lis.eq(index).fadeIn().siblings().fadeOut(); $(this).addClass('current').siblings().removeClass('current'); } //4.自動輪播 //先執行一次定時器 var timeid = setInterval(function () { right() }, 3000) //滑鼠移出div時,設定定時器,呼叫右邊箭頭的點選事件 $('.slider').mouseleave(function () { timeid = setInterval(function () { right() }, 3000) }) //滑鼠移入div時,清除定時器 $('.slider').mouseenter(function(){ clearInterval(timeid) }) })

相關推薦

仿京東輪播圖詳解版jQuery

$(function () { var index = 0;//用index記錄下標,預設為0 var lis = $('.slider li'); //1.右邊箭頭點選事件 $('.arrow-right').click(right);

達內-靜態路由與浮動靜態路由-（配圖詳解版）

達內-靜態路由與浮動靜態路由-（配圖詳解版）路由： 不同網段之間的通信，稱之為“路由”。實現： 路由設備：路由器，多層交換機本質： 通過查詢“路由表”實現“不同網段之間的路由功能”。路由器的工作原理： 1、路由器僅僅關心數據中的 “ 目標IP 地址” ； 2、路由器提取 目標IP

Javascript 京東輪播圖

height line tran click doc nload eight cti dex <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

京東輪播圖的空心圓做法

 思路就是，兩個盒子， 裡面的盒子的邊框設大一些， 用以設定不處於啟用狀態的圓，此時的外面盒子的背景不設定，也就是透明的。當處於啟用狀態時， 裡面的盒子背景和邊框都設為白色， 外邊框的背景設為有透明度的背景。 <!DOCTYPE html> <ht

京東輪播圖

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

php multicast多播實現詳解

clas -s ria socket php文件 pan php set 廣播 什麽是多播? 網絡中存在3中傳播形式，單播，廣播，多播。 1. 單播 : 就是1->1 2. 廣播 : 1->多(廣播域內) 3. 多播 : 1->組(一組ip) 1

(轉)oracle視圖詳解

子句 col 安全性 沒有 pil 重新編譯 語法錯誤 相關 his Oracle視圖詳解 一. 視圖的定義 視圖(view)，也稱虛表, 不占用物理空間，這個也是相對概念，因為視圖本身的定義語句還是要存儲在數據字典裏的。視圖只有邏輯定義。每次使用的時候,只是重新執行S

HSRP-熱備份路由協議（配置思路詳解版）

hsrp-熱備份路由協議（配置思路詳解版）HSRP-熱備份路由協議配置思路：一.IP地址規劃 PC1，IP-192.168.10.1/24 default gatway(網關地址)-192.168.10.250 PC2, IP-192.168.20.1/24 default gatway(網關地址)-19

UML類圖詳解_關聯關系_多對多

col c++代碼 一個 image 技術 pub 每一個 push_back cnblogs 在關聯關系中，很多情況下我們的多重性並不是多對一或者一對多的，而是多對多的。 不過因為我們要考慮裏面的導航性，如果直接搞的話就是需要去維護兩群對象之間多對多的互指鏈接，這就

UML類圖詳解_聚合關系

聚合 分享 產生 .com 特殊 begin blank .html 表達 結合UML關系，以看臺和基金來介紹聚合關系 aggregation，是一種特殊的關聯關系，既有關聯關系的特質，還獨有“整體 —— 部分（whole &md

useradd思維導圖詳解

play left 技術分享 .cn 用戶 order inux ont pla useradd思維導圖詳解 本思維導圖，用來說明Linux的的用戶和群組的詳細關系。 Xmind文件和預覽圖： 思維導圖文件用Xmind軟件打開，下載鏈接：useradd詳解.rar 預覽圖：

Oracle物化視圖詳解

zed 增量 建立 存在 表名 row $$ dbm 數據 現實工作中會有多個數據源同步到一個數據庫完成數據分析的場景，這些數據可以不是實時同步的，我們一般通過定時任務抽取數據到統計分析庫給應用使用。 一般的同步方式可以通過時間戳做全量和增量數據同步（存在原數據變化可能，數

【Oracle】Oracle Database 12c Release 2安裝多圖詳解

Oracle12c2版數據庫安裝1.1 下載安裝包 oracle官網地址請自行百度oracle，51CTO內容限制不讓我放！1)打開官方網站，找到下載連接，如圖所示。2)選擇更多下載。3)選擇數據庫版本，這裏選擇的是目前的最新版本4)接收許可協議，選在linux版本進行下載5) 接收許可協議，點擊linuxx

Oracle數據庫的安裝 【超詳細的文圖詳解】

ech passwd pat 適用於 下載 當前 play 領域 .so Oracle簡介Oracle Database，又名Oracle RDBMS，或簡稱Oracle。是甲骨文公司的一款關系數據庫管理系統。它是在數據庫領域一直處於領先地位的產品。可以說Oracle數據庫

MFC如何畫餅圖詳解

有個畫扇形的API，但是現在先不解釋，因為不懂畫餅圖的原理，你也不懂怎麼用。接下來就一步步帶大家去計算餅圖的扇形兩點座標。 直接看下圖，文字解釋總是太抽象。 接下來就是用Pie這個函式來畫出扇形了。 其原型如下： BOOL Pie( LPCRECT lpRect,

【動圖詳解】通過 User-Agent 識別爬蟲的原理、實踐與對應的繞過方法

開篇 隨著 Python 和大資料的火熱，大量的工程師蜂擁而上，爬蟲技術由於易學、效果顯著首當其衝的成為了大家追捧的物件，爬蟲的發展進入了高峰期，因此給伺服器帶來的壓力則是成倍的增加。企業或為了保證服務的正常運轉或為了降低壓力與成本，不得不使出各種各樣的技術手段來阻止爬蟲工程師們毫無節制的

Oracle視圖詳解

警告 delet lec 上進 容易 connected tps errors 2個 Oracle視圖詳解 一. 視圖的定義 視圖(view)，也稱虛表, 不占用物理空間，這個也是相對概念，因為視圖本身的定義語句還是要存儲在數據字典裏的。視圖只有邏輯定義。每次使用的時候

TCP狀態轉換圖詳解 tcp協議講解

在前面，已經介紹了TCP協議的三路握手和四次揮手。如下圖所示，TCP通訊過程包括三個步驟：建立TCP連線通道（三次握手）、資料傳輸、斷開TCP連線通道（四次揮手）。          &n

軟體開發，標準化流水線式開發的實施構想 Internet 服務匯流排 嵌入式通用行業應用平臺的靈魂和搭建 快速原型開發模式在實際開發過程中的應用 公用物件請求代理（排程）程式體系結構(CORBA) UML軟體設計基礎(UML圖詳解) （篇01）企業如何軟體商業化？ （篇02）企業如何軟體商業化？ 在

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

C++第7周任務3-輸出星號圖詳解示例

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！