jQuery幻燈片帶縮略圖輪播效果代碼分享

更新時間：2022年02月23日 12:29:02 投稿：lijiao

這篇文章主要介紹了jQuery實(shí)現(xiàn)幻燈片帶縮略圖輪播特效,圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下

這是一款基于jquery實(shí)現(xiàn)的底部帶縮略圖的幻燈片切換特效代碼，幻燈片可以點(diǎn)擊下方的縮略圖切換，用戶還可以自定義對應(yīng)幻燈片的標(biāo)題與文字說明，是一款非常實(shí)用的幻燈片特效源碼。

為大家分享的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|春華秋實(shí)" 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)行效果圖：