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


Posted in Javascript onAugust 17, 2015

这是一款基于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幻灯片带缩略图轮播效果代码分享

查看效果       下载源码

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
javascript中 try catch用法
Aug 16 #Javascript
javascript中undefined与null的区别
Aug 16 #Javascript
swtich/if...else的替代语句
Aug 16 #Javascript
javascript数组去重的六种方法汇总
Aug 16 #Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 #Javascript
js时钟翻牌效果实现代码分享
Jul 31 #Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 #Javascript
You might like
php 字符转义 注意事项
2009/05/27 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
浅析python参数的知识点
2018/12/10 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
Python timeit模块原理及使用方法
2020/10/10 Python
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
采购助理岗位职责
2014/02/16 职场文书
财务总监管理职责范文
2014/03/09 职场文书
团组织推优材料
2014/12/29 职场文书
2015年三万活动总结
2015/03/25 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis