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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
Element Dialog对话框的使用示例
Jul 26 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
详解Python中的条件判断语句
2015/05/14 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
在keras里实现自定义上采样层
2020/06/28 Python
python 实现音频叠加的示例
2020/10/29 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
Ruby如何创建一个线程
2013/03/10 面试题
房展策划方案
2014/06/07 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
2014年客房部工作总结
2014/11/22 职场文书
女性健康讲座主持词
2015/07/04 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
Django+Celery实现定时任务的示例
2021/06/23 Python
Mysql开启外网访问
2022/05/15 MySQL
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis