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 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 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
PHP图片上传类带图片显示
2006/11/25 PHP
phpwind中的数据库操作类
2007/01/02 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
js验证模型自我实现的具体方法
2013/06/21 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
初探nodeJS
2017/01/24 NodeJs
Vue 单文件中的数据传递示例
2017/03/21 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
简单实现python画圆功能
2018/01/25 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python模拟斗地主发牌
2020/04/22 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
python爬取抖音视频的实例分析
2021/01/19 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书