jQuery幻灯片带缩略图轮播效果代码分享
更新时间：2022年02月23日 12:29:02 投稿：lijiao
这篇文章主要介绍了jQuery实现幻灯片带缩略图轮播特效,图片可以自行替换，推荐给大家，有需要的小伙伴可以参考下
这是一款基于jquery实现的底部带缩略图的幻灯片切换特效代码，幻灯片可以点击下方的缩略图切换，用户还可以自定义对应幻灯片的标题与文字说明，是一款非常实用的幻灯片特效源码。
为大家分享的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="美景如画的海景|天蓝海蓝" 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="孤独的一棵老树|等谁呢？" 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(){
//如果已经处于active状态，return
if (this.className.indexOf("active")!=-1) return;
//正文文字渐隐
$("#frontText").fadeOut();
$("#frontTextBack").fadeOut();
$("#frontTextSub").fadeOut();
//active状态的图片恢复原样
$("li img.active").fadeTo(200,0.6)
.removeClass("active")
.animate({top:5,width:52,left:10},300)
.parent().css({"color":"#aaa"}); //
//获取数据
var i = $(this).attr("pic");
var t = $(this).attr("text").split("|");
//当前
$(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)} //副标题
);
})
})
//初始第一张图片
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>
运行效果图：
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是为大家分享的jQuery幻灯片带缩略图轮播代码，希望大家可以喜欢。
相关文章
放大镜类的文章网上有很多，由于实现起来比较麻烦，所以自己写了一个，下面为大家分享下具体的算法及实现代码，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了jQuery中add()方法用法,实例分析了add()方法的功能、定义及匹配元素中添加与表达式匹配的元素使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jquery实现表单输入时提示文字滑动向上效果,涉及jquery鼠标事件响应及页面元素样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
在IE10以上版本，微软为了提高IE输入框的便利性，增加了文本内容全部删除和密码眼睛功能，但是有些时候打开新的页面里，输入框却被锁定无法编辑，需要刷新一下页面，或者如果输入框有内容需要点击一下输入框后面的叉叉后才能输入，怎么解决呢，下面小编给大家解答下2016-10-10
这篇文章主要介绍了jQuery实现的Div窗口震动特效 ,需要的朋友可以参考下2014-06-06
自创"山寨版"的"博客园"TagCloud!...2010-06-06
这篇文章主要介绍了jQuery 查找元素操作,结合实例形式总结分析了jQuery针对页面元素的各种常见查找操作实现方法,需要的朋友可以参考下2019-10-10![jQuery学习笔记[1] jQuery中的DOM操作](//img.jbzj.com/images/xgimg/bcimg7.png)
jQuery中的DOM操作实现说明，学习DOM操作的朋友可以参考下。2010-12-12
这篇文章主要介绍了jQuery定义背景动态切换效果的方法,实例分析了jQuery操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
本文给大家分享的是一段基于jQuery的实现简单的表单提交验证的代码，非常简单实用，推荐给有相同需求的小伙伴们参考下。2014-11-11
![jQuery学习笔记[1] jQuery中的DOM操作](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论