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去空格处理方法
Nov 18 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
javascript常用经典算法详解
Jan 11 Javascript
原生JS轮播图插件
Feb 09 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
vue中配置scss全局变量的步骤
Dec 28 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
php获取网页内容方法总结
2008/12/04 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
Python多项式回归的实现方法
2019/03/11 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
党员承诺践诺书
2014/05/20 职场文书
工地标语大全
2014/06/18 职场文书
组工干部演讲稿
2014/09/02 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
Python OpenGL基本配置方式
2022/05/20 Python
Java Spring读取和存储详细操作
2022/08/05 Java/Android