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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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
MySQL数据源表结构图示
2008/06/05 PHP
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP比你想象的好得多
2014/11/27 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python中变量交换的例子
2014/08/25 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
职工代表大会主持词
2014/04/01 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript