jQuery幻燈片帶縮略圖輪播效果代碼分享
這是一款基于jquery實現(xiàn)的底部帶縮略圖的幻燈片切換特效代碼,幻燈片可以點(diǎn)擊下方的縮略圖切換,用戶還可以自定義對應(yīng)幻燈片的標(biāo)題與文字說明,是一款非常實用的幻燈片特效源碼。
為大家分享的jQuery幻燈片帶縮略圖輪播代碼如下
<html> <head> <title>帶縮略圖的jQuery幻燈片輪播效果</title> <link href="css/css.css" rel="stylesheet" type="text/css"> <script src="js/jquery-1[1].2.1.pack.js" type="text/javascript"></script> </head> <body> <br/><br/> <div align="center"> <div id=nav> <UL> <li><IMG src="images/02.jpg" text="美景如畫的海景|天藍(lán)海藍(lán)" pic="2"> <div>一個海島</div></li> <li><IMG src="images/01.jpg" text="Handy Code|春華秋實" pic="1"> <div>一片麥穗</div></li> <li><IMG src="images/03.jpg" text="郁郁蔥蔥的生命|生生不息的生命" pic="3"> <div>一樹綠葉</div></li> <li><IMG src="images/04.jpg" text="孤獨(dú)的一棵老樹|等誰呢?" pic="4"> <div>一棵大樹</div></li> <li><IMG src="images/05.jpg" text="明媚的向日葵花|生生不息的生命" pic="5"> <div>一地葵花</div></li> </UL> <div id=frontTextBack></div> <div id=frontText></div> <div id=frontTextSub></div> <div id=BG></div> <div id=mask></div> <div id=back><IMG height=240 src="" width=760></div> </div> <p> <SCRIPT type=text/javascript> <!-- var num = 0; $("#nav").hide(); $("li img").load(function(){ num++; if (num==4) { $("#nav").show(); } }) .click(function(){ //如果已經(jīng)處于active狀態(tài),return if (this.className.indexOf("active")!=-1) return; //正文文字漸隱 $("#frontText").fadeOut(); $("#frontTextBack").fadeOut(); $("#frontTextSub").fadeOut(); //active狀態(tài)的圖片恢復(fù)原樣 $("li img.active").fadeTo(200,0.6) .removeClass("active") .animate({top:5,width:52,left:10},300) .parent().css({"color":"#aaa"}); // //獲取數(shù)據(jù) var i = $(this).attr("pic"); var t = $(this).attr("text").split("|"); //當(dāng)前 $(this).animate({top:-5,width:70,height:40,left:1},100) .addClass("active") .fadeTo(200,1) .parent().css({"color":"white"}); $("#back").children().addClass("gray").end() .fadeTo(500,0.1,function(){ //var IMG = new Image(); //IMG.s $(this).children("img").attr("src","images/"+i+".jpg").removeClass("gray"); //更改圖片 $(this).fadeTo(500,1,function(){ $("#frontText").html(t[0]).fadeIn(200); //更改正文文字 $("#frontTextBack").html(t[0]).fadeIn(200); //陰影文字 $("#frontTextSub").html(t[1]).fadeIn(200)} //副標(biāo)題 ); }) }) //初始第一張圖片 var i =0; show(); function show(){ if (i==$("li img").size()) i = 0 $("li img").eq(i).click(); i++; //setTimeout(show(),1000); } document.oncontextmenu = function(e){return false} if (self.location.search!=""){ var V = self.location.search; V = V.substr(1,V.length); eval(V); var json ="{"; if (option.skin==0) $("#mask").hide(); if (option.animate == 0){ $("#nav ul").hide(); } $("#nav").width(option.width?option.width:760); $("#nav").height(option.height?option.height:240); $("#back img").width($("#nav").width()); $("#back img").height($("#nav").height()); $(self.parent.document.getElementById("splash")).children().height($("#nav").height()).width($("#nav").width()); } //--> </SCRIPT> </div> </body> </html>
運(yùn)行效果圖:
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是為大家分享的jQuery幻燈片帶縮略圖輪播代碼,希望大家可以喜歡。
相關(guān)文章
jquery validation驗證身份證號,護(hù)照,電話號碼,email(實例代碼)
jquery validation驗證身份證號,護(hù)照,電話號碼,email(實例代碼)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11jquery單選框radio綁定click事件實現(xiàn)方法
這篇文章主要介紹了jquery單選框radio綁定click事件實現(xiàn)方法,可實現(xiàn)針對單選框radio值的改變作出響應(yīng),非常具有實用價值,需要的朋友可以參考下2015-01-01json+jQuery實現(xiàn)的無限級樹形菜單效果代碼
這篇文章主要介紹了json+jQuery實現(xiàn)的無限級樹形菜單效果代碼,涉及jquery針對json數(shù)據(jù)的遍歷、讀取及動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08jQuery實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼
下面小編就為大家?guī)硪黄猨Query實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07