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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
js跑步算法的实现代码
Dec 04 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
微信jssdk用法汇总
Jul 16 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
微信小程序实现星级评价
Nov 20 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
JavaScript 学习笔记(十一)
2010/01/19 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
深入理解Python变量与常量
2016/06/02 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
Python接口开发实现步骤详解
2020/04/26 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
两则小学生的自我评价分享
2013/11/14 职场文书
商场消防演习方案
2014/02/12 职场文书
给市场的环保建议书
2014/05/14 职场文书
国庆节演讲稿
2014/05/27 职场文书
元旦主持词开场白
2015/05/29 职场文书
给朋友的赠语
2015/06/23 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python