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 相关文章推荐
一个获取第n个元素节点的js函数
Sep 02 Javascript
jquery获取radio值实例
Oct 16 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
jquery 指南/入门基础
2007/11/30 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python基于event实现线程间通信控制
2020/01/13 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
python模块内置属性概念及实例
2021/02/18 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
白酒代理协议书范本
2014/10/26 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
学生逃课检讨书
2015/02/17 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python