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去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 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编写简单的文章发布程序
2015/06/18 PHP
php实现分页显示
2015/11/03 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Python MD5文件生成码
2009/01/12 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Python自带的IDE在哪里
2020/07/01 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
银行门卫岗位职责
2013/12/29 职场文书
直接有效的自我评价
2014/01/11 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书