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 相关文章推荐
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
绑定回车enter事件代码
May 18 Javascript
Javascript的闭包详解
Dec 26 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
js的对象与函数详解
Jan 21 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
Node实现搜索框进行模糊查询
Jun 28 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的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
jquery简单体验
2007/01/10 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
python线程优先级队列知识点总结
2021/02/28 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
小学生演讲稿
2014/01/12 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
预备党员转正考核材料
2014/06/03 职场文书
内乡县衙导游词
2015/02/05 职场文书
2015年体育教学工作总结
2015/05/20 职场文书