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 获取radio按钮值的实例
Aug 17 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
jQuery中:empty选择器用法实例
2014/12/30 Javascript
js自定义回调函数
2015/12/13 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
深入解析Python中的WSGI接口
2015/05/11 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python IDLE清空窗口的实例
2018/06/25 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
实习单位推荐信范文
2013/11/27 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
运动会稿件100字
2014/02/21 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
小学生优秀评语
2014/12/29 职场文书
信访维稳承诺书
2015/05/04 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android