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 相关文章推荐
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 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实现的功能是显示8条基色色带
2006/10/09 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php实现数字补零的方法总结
2018/09/12 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
分享15个最受欢迎的Python开源框架
2014/07/13 Python
如何在python中使用selenium的示例
2017/12/26 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python异常的检测和处理方法
2018/10/26 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
全民健身日活动方案
2014/01/29 职场文书
校长先进事迹材料
2014/02/01 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
服务质量承诺书
2014/03/27 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python