jquery实现图片左右切换的方法


Posted in Javascript onMay 07, 2015

本文实例讲述了jquery实现图片左右切换的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片左右滚动</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script>
$(function(){
 var i=0;
 var li = $(".lxfscroll li");
 var n=li.length-1;
 var speed = 300;
 li.not(":first").css({left:"400px"});
 li.eq(n).css({left:"-400px"});
 lxfNext=function (){
 if (!li.is(":animated")) {
  if (i>=n){i=0;li.eq(n).animate({left:"-400px"},speed);
  li.eq(i).animate({left:"0px"},speed);
  }else{i++;li.eq(i-1).animate({left:"-400px"},speed);li.eq(i).animate({left:"0px"},speed);};
  li.not("eq(i)").css({left:"400px"});
  $("i").text(i+1);
 }else{};
 };
 lxfLast=function (){
 if (!li.is(":animated")) {
  if (i<=0){i=n;li.eq(0).animate({left:"400px"},speed);li.eq(n).animate({left:"0px"},speed);
  }else{i--;li.eq(i+1).animate({left:"400px"},speed);li.eq(i).animate({left:"0px"},speed);}
  li.not("eq(i)").css({left:"-400px"});
  $("i").text(i+1);
 };
 };
});
</script>
<style type="text/css">
* {
 font-size:12px;
 color:#333;
 text-decoration:none;
 padding:0;
 margin:0;
 list-style:none;
 font-style: normal;
 font-family: Arial, Helvetica, sans-serif;
}
.lxfscroll {
 width:400px;
 margin-left:auto;
 margin-right:auto;
 margin-top: 20px;
 overflow: hidden;
 position: relative;
 height: 300px;
 border: 1px dashed #CCC;
}
.button {
 margin-right:auto;
 margin-left:auto;
 width:400px;
 text-align:center;
 padding-top: 10px;
}
i {
 color:#F00;
 font-weight:bold;
}
.button input {
 padding-top: 4px;
 padding-right: 12px;
 padding-bottom: 4px;
 padding-left: 12px;
}
.lxfscroll ul li {
 height: 300px;
 width: 400px;
 text-align: center;
 line-height: 300px;
 position: absolute;
 font-size: 40px;
 font-weight: bold;
}
</style>
</head>
<body>
<div class="lxfscroll">
 <ul>
  <li>我是第1张图片</li>
  <li>我是第2张图片</li>
  <li>我是第3张图片</li>
  <li>我是第4张图片</li>
  <li>我是第5张图片</li>
  <li>我是第6张图片</li>
  <li>我是第7张图片</li>
  <li>我是第N张图片</li>
 </ul>
</div>
<div class="button">
<input name="a" type="button" onClick="lxfLast()" value="上一个" />
<input name="a" type="button" onClick="lxfNext()" value="下一个" />
</div>
<div class="button">当前显示的是第 <i>1</i> 张图片</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 #Javascript
jQuery团购倒计时特效实现方法
May 07 #Javascript
js由下向上不断上升冒气泡效果实例
May 07 #Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 #Javascript
js显示文本框提示文字的方法
May 07 #Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 #Javascript
浅谈document.write()输出样式
May 07 #Javascript
You might like
常用PHP框架功能对照表
2014/10/23 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
深入浅析Python中的迭代器
2019/06/04 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
给全校老师的建议书
2014/03/13 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
2014年实习期工作总结
2014/11/27 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
linux下安装redis图文详细步骤
2021/12/04 Redis