jQuery幻灯片带缩略图轮播效果代码分享

首页

web前端

js教程

jQuery幻灯片带缩略图轮播效果代码分享_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:44 PM

这是一款基于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="/static/imghw/default1.png"  data-src="images/02.jpg"  class="lazy" text="美景如画的海景|天蓝海蓝" pic="2" alt="jQuery幻灯片带缩略图轮播效果代码分享_jquery" >
 <div>一个海岛</div></li>
 <li><img  src="/static/imghw/default1.png"  data-src="images/01.jpg"  class="lazy" text="Handy Code|春华秋实" pic="1" alt="jQuery幻灯片带缩略图轮播效果代码分享_jquery" >
 <div>一片麦穗</div></li>
 <li><img  src="/static/imghw/default1.png"  data-src="images/03.jpg"  class="lazy" text="郁郁葱葱的生命|生生不息的生命" pic="3" alt="jQuery幻灯片带缩略图轮播效果代码分享_jquery" >
 <div>一树绿叶</div></li>
 <li><img  src="/static/imghw/default1.png"  data-src="images/04.jpg"  class="lazy" text="孤独的一棵老树|等谁呢？" pic="4" alt="jQuery幻灯片带缩略图轮播效果代码分享_jquery" >
 <div>一棵大树</div></li>
 <li><img  src="/static/imghw/default1.png"  data-src="images/05.jpg"  class="lazy" text="明媚的向日葵花|生生不息的生命" pic="5" alt="jQuery幻灯片带缩略图轮播效果代码分享_jquery" >
 <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  src="/static/imghw/default1.png"  data-src="http://files.jb51.net/file_images/article/201508/201581785807916.png&#63;201571785837"  class="lazy"  height=240    style="max-width:90%"jQuery幻灯片带缩略图轮播效果代码分享_jquery" ></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&#63;option.width:760);
 $("#nav").height(option.height&#63;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幻灯片带缩略图轮播代码，希望大家可以喜欢。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7677

CakePHP 教程

1393

C# 教程

1207

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。