jquery的幻灯片图片切换效果代码分享


Posted in Javascript onSeptember 07, 2015

本文实例讲述了jquery的幻灯片图片切换效果。分享给大家供大家参考。具体如下:
这是一款基于jquery的幻灯片图片切换效果代码,有缩略图和标题,可以自定义标题。
运行效果图:     -------------------查看效果 下载源码-------------------

jquery的幻灯片图片切换效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
(1)在head区域引入CSS样式:

<LINK rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen>

(2)js代码:

<SCRIPT type=text/javascript src="js/jquery-1.3.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/jquery.easing.1.2.js"></SCRIPT>
<SCRIPT type=text/javascript>
 // <![CDATA[
 $(document).ready(function(){
 
  if ($('#pager a').size() <= 1) {
  $('#pager').css('display', 'none');
  return;
  }
 
  var index = 0;
  var selected = null;
  var width = 756;
  
  $('#pager a').each(function(i){
  if (i == 0) {
   selected = $(this);
   selected.find('img').attr('src', 'images/button-

view-active.gif');
  }
  $(this).click(function(){
   index = i;
   selected.find('img').attr('src', 'images/button-

view.gif');
   selected = $(this);
   selected.find('img').attr('src', 'images/button-

view-active.gif');
   $('#images').animate({left:-(width * i)}, 500, 

'easeOutQuad');
   return false;
  });
  });
  
  $('#images').wrapInner('<a href="#" id="next"></a>');
  $('#next').click(function(){
  var a = $('#pager a').get(index + 1);
  if (!a) a = $('#pager a').get(0);
  $(a).click();
  return false;
  });
 });
 // ]]>
 </SCRIPT>

为大家分享的jquery的幻灯片图片切换效果代码如下

<head>
<title>幻灯片图片切换效果</title>
<LINK rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen>
<SCRIPT type=text/javascript src="js/jquery-1.3.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/jquery.easing.1.2.js"></SCRIPT>
<SCRIPT type=text/javascript>
 // <![CDATA[
 $(document).ready(function(){
 
  if ($('#pager a').size() <= 1) {
  $('#pager').css('display', 'none');
  return;
  }
 
  var index = 0;
  var selected = null;
  var width = 756;
  
  $('#pager a').each(function(i){
  if (i == 0) {
   selected = $(this);
   selected.find('img').attr('src', 'images/button-

view-active.gif');
  }
  $(this).click(function(){
   index = i;
   selected.find('img').attr('src', 'images/button-

view.gif');
   selected = $(this);
   selected.find('img').attr('src', 'images/button-

view-active.gif');
   $('#images').animate({left:-(width * i)}, 500, 

'easeOutQuad');
   return false;
  });
  });
  
  $('#images').wrapInner('<a href="#" id="next"></a>');
  $('#next').click(function(){
  var a = $('#pager a').get(index + 1);
  if (!a) a = $('#pager a').get(0);
  $(a).click();
  return false;
  });
 });
 // ]]>
 </SCRIPT>
</head>

<body style="text-align:center" class=work-project>

<DIV id=content>
<DIV id=project><!-- project navigation -->
<P id=navigation><SPAN id=pager>
<A href="images/1.jpg"><IMG alt=1 src="images/button-view.gif" width=12 height=19></A>
<A href="images/2.jpg"><IMG alt=2 src="images/button-view.gif" width=12 height=19></A>
<A href="images/3.jpg"><IMG alt=3 src="images/button-view.gif" width=12 height=19></A>
<A href="images/4.jpg"><IMG alt=4 src="images/button-view.gif" width=12 height=19></A>
<A href="images/5.jpg"><IMG alt=5 src="images/button-view.gif" width=12 height=19></A>
</SPAN></P>
<!-- project images -->
<DIV id=mask>
<DIV id=images>
<IMG src="images/1.jpg" width=756 height=518><IMG src="images/2.jpg" width=756 

height=518><IMG src="images/3.jpg" width=756 height=518><IMG src="images/4.jpg" width=756 

height=518><IMG src="images/5.jpg" width=756 height=518></DIV></DIV><!-- project title -->
</DIV></DIV>
</DIV>
</body>
</html>

以上就是为大家分享的jquery的幻灯片图片切换效果代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
javascript工具库代码
Mar 29 Javascript
JQuery教学之性能优化
May 14 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
js实现消息滚动效果
Jan 18 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
jQuery实现简单下拉导航效果
Sep 07 #Javascript
JS实现弹性菜单效果代码
Sep 07 #Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 #Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 #Javascript
关于JS中prototype的理解
Sep 07 #Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 #Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 #Javascript
You might like
神族 Protoss 历史背景
2020/03/14 星际争霸
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
一段php加密解密的代码
2006/10/09 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
详解python中@的用法
2019/03/27 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
python实现人工蜂群算法
2020/09/18 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers