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非法字符过滤代码(骂人的话等等)
May 26 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
three.js 如何制作魔方
Jul 31 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php继承的一个应用
2011/09/06 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
基于vue中的scoped坑点解说
2020/09/04 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python实现爬取图书封面
2018/07/05 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
基于python 凸包问题的解决
2020/04/16 Python
Django-migrate报错问题解决方案
2020/04/21 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
法律七进实施方案
2014/03/15 职场文书
党日活动总结
2014/05/07 职场文书
家长会标语
2014/06/24 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
大学生见习总结报告
2015/06/24 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android