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 相关文章推荐
网站接入QQ登录的两种方法
Jul 22 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 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文件压缩之PHPZip类用法实例
2015/06/18 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
基于Python实现文件大小输出
2016/01/11 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
对Python信号处理模块signal详解
2019/01/09 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python ORM编程基础示例
2020/02/02 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
普天C++笔试题
2016/03/20 面试题
医科大学毕业生自荐信
2014/02/03 职场文书
征婚广告词
2014/03/17 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
会议通知范文
2015/04/15 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
2019年工作总结范文
2019/05/21 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python