jQuery幻灯片带缩略图轮播效果代码分享

这是一款基于jquery实现的底部带缩略图的幻灯片切换特效代码，幻灯片可以点击下方的缩略图切换，用户还可以自定义对应幻灯片的标题与文字说明，是一款非常实用的幻灯片特效源码。

为大家分享的jQuery幻灯片带缩略图轮播代码如下

htmlheadtitle带缩略图的jQuery幻灯片轮播效果/title link href=' CSS/CSS。CSS ' rel='样式表type=' text/CSS '脚本src=' http : js/jquery-1[1]。2.1 .打包。js ' type=' text/JavaScript '/script/head dybr/br/div align=' center ' div id=navUL Liimg src=' http 3360 images/02。jpg ' text='美景如画的海景|天蓝海蓝pic='2' div一个海岛/div/Li Li IMg src=' http : images/01。jpg ' text=' Handy Code |春华秋实pic='1' div一片麦穗/div/Li LiIMg src=' http : images/03。jpg ' text='郁郁葱葱的生命|生生不息的生命pic='3' div一树绿叶/div/Li LiIMg src=' http : images/04。jpg ' text='孤独的一棵老树|等谁呢？pic='4' div一棵大树/div/Li LiIMg src=' http : images/05。jpg ' text='明媚的向日葵花|生生不息的生命pic='5' div一地葵花/div/Li/ULdiv id=前text back/div id=前text/div id=前text sub/div div id=BG/div div id=mask/div div id=back img高度=240 src='http: '宽度=760/div/divp SCRIPT类型=text/javascript！-var num=0；$('#nav ').hide()；$('li img ').load(function(){ num；if (num==4) { $('#nav ').show()；} }) .单击(函数(){ //如果已经处于活跃的状态，返回如果(这个。类名。indexof(' active ')！=-1)返回；//正文文字渐隐$('#frontText ').淡出()；$('#frontTextBack ').淡出()；$('#frontTextSub ').淡出()；//活动状态的图片恢复原样$('li img.active ').fadeTo(200，0.6).removeClass("活动")。动画({top:5，width:52，left:10}，300).父项()。CSS({ ' color ' : ' # AAA ' })；////获取数据var i=$(这个)。attr(' pic ')；var t=$(这个)。attr('文本').拆分(' | ');//当前$(这个)。动画({顶部：-5，宽度：70，高度：40，左侧：1}，100).addClass('active ').fadeTo(200，1).父项()。CSS({ ' color ' : ' white ' })；$('#back ').儿童()。addClass(')灰色')。end().fadeTo(500，0.1，function(){//var IMG=new Image()；//IMG.s $(这个)。儿童(' img ').attr('src '，' images/' i ' .jpg ').removeClass(“”灰色');//更改图片$(这个)。fadeTo(500，1，function(){ $('#frontText ')).html(t[0]).法丁(200);//更改正文文字$('#frontTextBack ').html(t[0]).法丁(200);//阴影文字$('#frontTextSub ').html(t[1]).fadeIn(200)} //副标题);}) }) //初始第一张图片var I=0；show()；函数show(){ if (i==$('li img ').size()) i=0 $('li img ').方程式(I ).单击();我；//setTimeout(show()，1000)；}文档。oncontext menu=function(e){ return false } if(self。位置。搜索！=' '){ var V=self。位置。搜索；V=V子串(1，v长度);评价（五);var JSON=' { if(option . skin==0)$(' # mask ').hide()；if(选项。动画==0){ $(' # nav ul ').hide()；} $('#nav ').宽度（选项。宽度？选项。宽度：760)；$('#nav ').高度（可选。高度？选项。高度：240)；$('#back img ').宽度($('#nav ').width())；$('#back img ').高度($('#nav ').高度());$(自我。父母。文件。getelementbyid(' splash ').儿童()。高度($('#nav ').高度())。宽度($('#nav ').width())；}/////SCRIPT/div/body/html运行效果图：

查看效果下载源码

精彩专题分享：jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播

以上就是为大家分享的jQuery幻灯片带缩略图轮播代码，希望大家可以喜欢。