/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

图片左右滚动

$(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);

};

};

});

* {

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;

}

  • 我是第1张图片
  • 我是第2张图片
  • 我是第3张图片
  • 我是第4张图片
  • 我是第5张图片
  • 我是第6张图片
  • 我是第7张图片
  • 我是第N张图片
当前显示的是第 1 张图片

html图片左右转换,jquery实现图片左右切换的方法相关推荐

  1. PNG图片怎么转换成JPG图片

    jpg图片是一种比较清晰的图片格式之一,是许多普通图片无法比较的,所以很多人喜欢将普通的PNG图片转换成JPG格式的,这时候就需要用到图片转换工具了,那么PNG图片怎么转换成JPG图片呢? 下面小编用 ...

  2. 图片怎么转换成PDF,这三个方法轻松搞定!

    图片转PDF是指将图片文件转换为PDF文件的过程.PDF(Portable Document Format)是一种文件格式,能够保存文本.图像.表格等多种元素.PDF文件具有跨平台性.可打印性和可搜索 ...

  3. PHP RGB图片模式转换CMYK模式图片

    首先需要安装Imagick扩展 1.php调用phpqrcode生成图片是索引模式,首先需要转换RGB模式 代码如下: /*** 转换RGB模式图片* @param $filePath 图片路径 ** ...

  4. 图片格式转换,JPG图片转换成PDF

    图片格式转换在日常工作中经常遇到,特别是JPG图片转换成PDF,小编今天介绍一个简单的方法,告诉你如何将JPG图片转换成PDF. 工具:迅捷PDF阅读器.需要转换的JPG图片 操作步骤 1:安装运行J ...

  5. 图片如何转换png?图片转换格式用什么软件?

    怎么把图片格式转换png?当我们遇到需要进行png格式转换(在线图片格式转换器(jpg.png.gif.webp.bmp.tiff)-压缩图)的时候,可以使用压缩图的转格式功能在线转换png,具体操作 ...

  6. 怎么把图片文字转换成word文档?这个方法了解一下

    在现代的生活中,我们经常需要将图片中的文字转换成Word文档,以方便我们编辑和处理文本.虽然在电脑上进行这项工作很容易,但是在手机上可能会有些困难.在本文中,我们将介绍一些在手机上将图片文字转换成Wo ...

  7. 图片怎么转换成文字?这四种方法分分钟完成转换

    怎么将图片转换成文字呢?通过图片转文字的方式,文本内容更容易编辑和搜索.传统上,我们需要手动输入文本内容,这是一项耗时且费力的工作,但通过图片转文字,我们可以自动将图片中的文字提取出来,然后进行编辑和 ...

  8. html逐渐显示图片,怎么用jquery让图片逐渐显示出来

    怎么用jquery让图片逐渐显示出来 发布时间:2020-12-15 09:51:09 来源:亿速云 阅读:107 作者:小新 小编给大家分享一下怎么用jquery让图片逐渐显示出来,希望大家阅读完这 ...

  9. Python和bat脚本实现PNG图片批量转换成JPG图片

    一:bat脚本实现 第一步:创建一个.txt文件 第二步:在.txt文件中写入ren *.png *.jpg 第三步:右键重命名 将后缀从.txt改为.bat 第四步:将该文件放到要修改的图片的文件夹 ...

最新文章

  1. java jmx jboss_jboss中JMX的连接与Mbean的获取
  2. [转载]Eclipse SVN插件比较 Subclipse vs Subversive
  3. 黑客与网管的30天较量
  4. 【解决方案】Expected object of type torch.FloatTensor but found type torch.DoubleTensor
  5. 后端必备的200本书,一次性给你!
  6. g5420核显驱动win7_9102年了,该怎么装Win7 ???
  7. 错误:ORA-28002: the password will expire within 7 da
  8. netbeans字体与颜色配置模板相关网站
  9. e5 2630v4 php性能,至强E5 V4性能表现测试
  10. Double值保留两位小数的四种方法
  11. php 发送网络命令,linux命令经典用法与配置收录
  12. TensorFlow2.0学习使用笔记
  13. 本地与服务器文件同步软件哪个好,同步软件哪个好,亲身体验的3款免费同步软件介绍...
  14. python 腾讯视频签到_腾讯视频V力值自动签到
  15. 台式计算机的显卡,2019显卡天梯图 台式机显卡GPU桌面显卡排名
  16. 斐讯k2路由器刷固件一条龙——从小白到大神
  17. 三维实景下的南极科考站是什么样子?
  18. 微型计算机主要技术指标是啥,微型计算机的主要技术指标
  19. 计算机如何共享手机网络,怎么把电脑网络共享给手机
  20. 电脑蓝屏0x000024解决记录

热门文章

  1. 云计算运维:运维人员常用到的11款服务器监控工具
  2. 受损固态硬盘(SSD)数据恢复方法
  3. 吊打tomcat的高性能web服务器undertow
  4. 戴尔计算机专业推荐笔记本电脑,戴尔笔记本推荐
  5. 大白菜制作win10系统盘
  6. 计算机人脸识别算哪个专业,人脸识别属于计算机什么领域(图文)
  7. /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵
  8. pysptk, 语音信号处理工具包( SPTK )的python 封装器
  9. python爬虫--小说爬取
  10. 1162: 6003 星期几?