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 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
在vue里使用codemirror遇到的问题
Nov 01 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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静态方法及普通方法的区别
2016/10/04 PHP
PDO::errorCode讲解
2019/01/28 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
python 控制语句
2011/11/03 Python
transform python环境快速配置方法
2018/09/27 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
马智宇结婚主持词
2014/04/01 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
女生节标语
2014/06/26 职场文书
入党政审材料范文
2014/12/24 职场文书
业务员岗位职责
2015/02/03 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
关于分班的感言
2015/08/04 职场文书