jQuery實現(xiàn)選項聯(lián)動輪播效果【附實例】
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link rel="stylesheet" href="css/baner.css"> <script src="js/jquery-1.11.3.js"></script> <script src="js/index.js"></script> <title>JQ輪播三級連鎖</title> </head> <body> <div class="parent"> <div class="top"> <p> <a href="">創(chuàng)意空間</a> <a href="">永恒的愛</a> <a href="">浪漫真情</a> <a href="">珍貴獨特</a> </p> </div> <div class="fours"> <a href=""><img src="img/1.jpg" alt=""></a> <a href=""><img src="img/2.jpg" alt=""></a> <a href=""><img src="img/3.jpg" alt=""></a> <a href=""><img src="img/4.jpg" alt=""></a> </div> </div> </body> </html>
CSS
*{ border:none; margin: 0; padding: 0; list-style: none; outline: none; } html,body{ width: 100%; height: 100%; } /*方法二*/ body{ display: flex; align-items: center;/****水平居中****/ justify-content: center;/*垂直居中*/ } .parent{ width: 750px; height: 400px; /*方法一*/ /*margin: 0 auto;*/ /*position: relative;*/ /*top: 50%;*/ /*margin-top: -200px;*/ } /*輪播*/ .top p{ width: 90%; margin: 0 auto; } .top p a{ display: inline-block; line-height: 30px; width: 23%; padding: 10px 0; text-align: center; text-decoration: none; border: 2px solid transparent; color: slategray; } .top p a.selected{ border: 2px solid #e4393c; color: #e4393c; } /*圖片*/ .fours{ width: 650px; margin: 0 auto; height: 300px; position: relative; margin-top: 30px; } .fours a{ position: absolute; }
JS
定義變量和定時器,變量等價于eq(index)中index,自動輪播是可以的,關(guān)鍵在于,鼠標進入選項卡區(qū)域時候,怎么對應想要的輪播畫面,
方法:停止定時器,獲取當前選項卡下標,匹配對應的輪播畫面顯示出來。
var a=0; var t=null; $(function(){ $('.fours>a:not(:first-child)').hide(); t=setInterval("autoMove()",2000); //鼠標進入輪播停止 $('.parent').hover(function(){clearInterval(t)},function(){t=setInterval("autoMove()",2000);}); // 當鼠標進去對應選項時候圖片對應變化 $(".top p>a").hover(function(){ clearInterval(t); var num=$(this).index(); showThis(num); //console.log(num); }) }); function autoMove(){ a++; if(a>=4){ a=0; } play(a); } function play(a){ $('.fours>a').filter(":visible").fadeOut(500).parent().children().eq(a).fadeIn(1000); $('.top p a').eq(a).addClass("selected").siblings().removeClass("selected"); } //鼠標進入的情況 function showThis(sum){ $(".fours>a").eq(sum).fadeIn(1000).siblings().fadeOut(500); $(".top p a").eq(sum).addClass("selected").siblings().removeClass("selected"); }
以上這篇jQuery實現(xiàn)選項聯(lián)動輪播效果【附實例】就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應大圖片功能【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應大圖片功能,涉及jQuery事件響應、元素遍歷及屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-04-04基于jquery實現(xiàn)人物頭像跟隨鼠標轉(zhuǎn)動
一款非常乖巧的人物頭像跟隨鼠標轉(zhuǎn)動效果,在瀏覽器屏幕內(nèi),人物臉龐始終面向鼠標轉(zhuǎn)動,本篇文章給大家介紹基于jquery實現(xiàn)人物頭像跟隨鼠標轉(zhuǎn)動,有需要的朋友可以參考下2015-08-08jQuery.Callbacks()回調(diào)函數(shù)隊列用法詳解
這篇文章主要介紹了jQuery.Callbacks()回調(diào)函數(shù)隊列用法,結(jié)合實例形式詳細分析了jQuery.Callbacks()回調(diào)函數(shù)隊列的功能、控制標志含義與相關(guān)注意事項,需要的朋友可以參考下2016-06-06jQuery隊列控制方法詳解queue()/dequeue()/clearQueue()
jQuery核心中, 有一組隊列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個方法組成, 它對需要連續(xù)按序執(zhí)行的函數(shù)的控制可以說是簡明自如, 主要應用于animate ()方法, ajax以及其他要按時間順序執(zhí)行的事件中.2010-12-12jquery 字符串切割函數(shù)substring的用法說明
本篇文章主要是對jquery字符串切割函數(shù)substring的用法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jQuery+JSON實現(xiàn)AJAX二級聯(lián)動實例分析
這篇文章主要介紹了jQuery+JSON實現(xiàn)AJAX二級聯(lián)動的方法,以實例形式分析了前臺jQuery結(jié)合ajax傳遞json格式數(shù)據(jù)及后臺數(shù)據(jù)處理技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)
本篇文章主要介紹了jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法),需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01