带有控制按钮的图片滚动

上一次写了一个图片自动滚动功能,没有左右按钮控制的功能。今天花了点时间,写了一个带有左右按钮控制的图片滚动效果。所谓自动滚动,原理就是周期性的执行一个效果。在js中,通常是用setInterval这个函数来执行的,setInterval(func,speed),func表示所要执行的函数,speed表示周期时间,通常用毫秒来表示。

先看一下效果图:

图片滚动

这里一共有5张图片,而现在为什么只显示4张呢?这里用了css的overflow属性控制一下,我们不可能把所有要滚动的图片都显示出来,那样滚动就毫无意义了,用户不要滚动,就可以看到所有的图片了,也影响页面图片的加载时间。所以要把一些图片隐藏起来。

overflow的作用就是子级的宽度超过了父级的宽度,那么子级超过的宽度为隐藏起来,当然内容也会隐藏起来。

.subBox {padding: 0;margin: 0 10px;width: 830px;overflow: hidden;
}.subBox ul {width: 100000px;
}

还有一点要做到无间隙的滚动,子级的宽度很宽,可显示区域如果滚动完了,就会出现空白,这里也考虑到了这一点,解决的方式是:向左滚动,就把最后一张图片放到最前面去,向右滚动就把第一张图片放到后面去。

obj.find("li:last").prependTo(obj);//向左滚动
obj.find("li:first").appendTo(obj);//向右滚动

因为是自动滚动的,当用户向鼠标移到图片上时让他停止,这里就用到了clearInterval功能,表示停止周期性滚动

clearInterval(moving);

具体代码如下:

<!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.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){var left = $("#left");var right = $("#right");var obj = $(".subBox ul");var w = obj.find("li").innerWidth();left.click(function(){obj.find("li:last").prependTo(obj);obj.css("margin-left",-w);obj.animate({"margin-left": 0});});right.click(function(){obj.animate({"margin-left": -w},function(){obj.find("li:first").appendTo(obj);obj.css("margin-left","0");});});var moving = setInterval(function(){left.click()},2000);obj.hover(function(){clearInterval(moving);},function(){moving = setInterval(function(){left.click()},2000);})});
</script>
<style type="text/css">
* {margin: 0;padding: 0;list-style: none;
}.box {margin: 10px auto;width: 880px;text-align: left;
}.floatL {padding-top: 45px;float: left;
}.subBox {padding: 0;margin: 0 10px;width: 830px;overflow: hidden;
}.subBox ul {width: 100000px;
}.subBox ul li {width: 210px;float: left;
}</style>
</head>
<body>
<div class="box"><div class="floatL" id="left"><img src="left.gif" alt="" /></div><div class="subBox floatL"><ul><li><img src="0.jpg" alt="" /></li><li><img src="1.jpg" alt="" /></li><li><img src="2.jpg" alt="" /></li><li><img src="3.jpg" alt="" /></li><li><img src="4.jpg" alt="" /></li></ul></div><div class="floatL" id="right"><img src="right.gif" alt="" /></div>
</div>
</body>
</html>

效果下载地址:demo下载

如有不足之处,还请大家提出宝贵意见,谢谢

转载于:https://www.cnblogs.com/gaoyubao/archive/2012/06/21/2557502.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/296910.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

启动ipython内核发生错误_ipython3启动

Spark的安装分为几种模式&#xff0c;其中一种是本地运行模式&#xff0c;只需要在单节点上解压即可运行&#xff0c;这种模式不需要依赖Hadoop 环境。 运行 spark-shell 本地模式运行spark-shell非常简单&#xff0c;只要运行以下命令即可&#xff0c;假设当前目录是$SPARK_HO…

Win11代言人官宣

微软宣布李现为中国市场的“微软零售全品牌大使”&#xff0c;代言全新 Windows 11、Surface 和 Microsoft 365 等产品。微软全新发布的 Windows 11 操作系统&#xff0c;简洁高效&#xff0c;带来耳目一新的视觉和使用体验全新升级的新一代 Surface Pro 8 惊艳上市&#xff0…

linux 硬盘报错日志,Linux内核I_O系统报错日志与硬盘故障对应关系

Linux 内核I/O 系统报错日志与硬盘故障对应关系Jun042011Leave a Comment Written by chen日志信息 故障现象描述与硬盘关系 scsi1: ERROR on channel 0, id 7, lun 0, CDB: Read (10) 00 73 fc 62 bf 00 00 80 00 Info fld0x73fc6326, Current sdi: sense key Medium Error Ad…

求余运算符

笔记摘自《极客学院》 求余运算&#xff08;a % b&#xff09;是计算b的多少倍刚刚好可以容入a&#xff0c;返回多出来的那部分&#xff08;余数&#xff09;。 注意&#xff1a;求余运算&#xff08;%&#xff09;在其他语言也叫取模运算。然而严格说来&#xff0c;我们看该运…

实习启航

两个月左右没有更新博客了&#xff0c;原因说了也白说&#xff0c;人是喜欢找原因的动物。这会造成很多假象&#xff0c;浪费很多时间&#xff0c;我喜欢向前看。说说近况吧。明天就要坐火车去深圳了&#xff0c;我从出生到现在就去过中国的3个省&#xff1a;武汉&#xff08;出…

页面上指定类型的控件的样式添加

重构代码&#xff01;由于不能用到skin所以在基类里面写了个加载样式的方法。 1 #region 初始化控件2 private void InitializeControls()3 {4 foreach (Control HtmlCon in this.Controls)5 {6 if (HtmlCon is HtmlForm)7 {8…

万箭齐发!COSCon' 21深圳分会场闪亮登场!

“ 点击蓝字 / 关注我们 ”| 作者&#xff1a;COSCon21 组委会| 编辑&#xff1a;钱奕| 设计&#xff1a;朱亿钦| 责编&#xff1a;沈于蓝01序言世界上最遥远的距离&#xff0c;不是生与死的距离&#xff0c;而是你在我对面办公楼&#xff0c;却不能一起嗨皮。辣么多个辗转反侧…

6部BBC “教材级” 地理纪录片,有生之年必看系列!

全世界只有3.14 % 的人关注了爆炸吧知识看BBC的纪录片&#xff0c;既可以追溯上下数千年的历史文化&#xff0c;也可以欣赏从宇宙到地心深处的奇妙境界&#xff0c;而及其超级精彩的画面即使定格&#xff0c;也是一幅摄影佳作。BBC纪录片题材广泛、制作精良&#xff0c;观看起来…

黑马c++32期_【每日一考】第40期:计提折旧

每天都有很多小伙伴来做会计实操每日一考实操君看到非常的欣慰&#xff0c;希望大家持续打卡学习请看今天的题▼▼▼单选题某企业的一辆运货卡车&#xff0c;其原价为600 000元&#xff0c;预计总行驶里程为500 000千米&#xff0c;预计报废时的净残值率为5&#xff05;&#x…

linux挂载4t硬盘用不了,centos7挂载新加4T硬盘到/home目录

以下操作均在root环境下运行。1.查看硬盘# fdisk -l发现硬盘为/dev/sdb 大小4T2.如果此硬盘以前有过分区&#xff0c;则先对磁盘格式化&#xff1a;# mkfs -t ext4 /dev/sdb此命令会对整个磁盘格式化3.对新磁盘进行分区&#xff0c;由于fdisk仅支持2T以内磁盘分区&#xff0c;但…

8606 二叉树遍历的建设和运营

8606 二叉树遍历的建设和运营时限:1000MS 内存限制:1000K问题: 编程题 语言: 无限叙述性说明用二进制表示的名单二叉树结构&#xff1a;按第一个二进制序列&#xff0c;以便输入节点值&#xff08;一个字符&#xff09;&#xff0c;#字符表示空树。构造二叉链表表示的二叉树…

XML的BOM

最近做一个XML的生成与导入功能&#xff0c;生成的XML经过语法验证和Schema验证&#xff0c;均无错误&#xff0c;编码方式也是所要求UTF-8&#xff0c;可是导入时却一直提示&#xff1a; Error on line 1 of document : Content is not allowed in prolog. Nested exception:…

关于C#中实现两个应用程序消息通讯的问题

最近项目中需要在两个应用程序之间通讯&#xff0c;这里的两个程序是在一台机器上&#xff0c;看了csdn上的一篇文章《如何在C#用WM_COPYDATA消息来实现两个进程之间传递数据》&#xff0c;原理是讲清楚了&#xff0c;但使起来很不爽&#xff0c;决定自己封装一下&#xff0c;满…

C#提升性能的几点提示和技巧

C&#xff03;性能提示和技巧在Raygun[1]&#xff0c;我们是一群非常懂多种语言的开发人员。Raygun的各个部分使用不同的语言和框架编写-最好的工作方式。鉴于大量的C&#xff03;和我们正在处理的数据的爆炸性增长&#xff0c;在不同的时间需要进行一些优化工作。大部分重大的…

电脑睡眠快捷键_电脑快速进入睡眠的快捷键是什么?

电脑快速进入睡眠的快捷键是什么&#xff1f;正常情况下需要点击电源再按睡眠&#xff0c;小编觉得有点麻烦&#xff0c;如果你想要进入睡眠状态能够像锁屏快捷键那样就好了&#xff0c;那么今天就教大家如何设置睡眠快捷键&#xff0c;让你的电脑快速进入睡眠状态。我们知道电…

世界上最奇特的国界线,万万没想到...

全世界只有3.14 % 的人关注了爆炸吧知识你曾经可能多次在飞机上切换不同的国家&#xff0c;但未曾真的看见过这些国家之间的分界线。没见过之前&#xff0c;你脑海中的国界线是怎样的&#xff1f;一道高墙&#xff1f;还是一条无法逾越的鸿沟......看似正经而严谨&#xff0c;但…

Dell poweredge r210进BIOS修改磁盘控制器(SATA Controller)接口模式

Dell poweredge r210进BIOS修改磁盘控制器&#xff08;SATA Controller&#xff09;接口模式 开机后按F2键进入BIOS设置&#xff0c;如下图&#xff1a; BIOS设置主界面&#xff1a; 使用上下键移动光标到“SATA Controller”上&#xff0c;按回车键进入接口模式设置。 使用…

linux iptables导致httpd网页打不开

问题&#xff1a;httpd 服务已启动&#xff0c;80端口已开&#xff0c;但是网页就是打不开&#xff0c;重启服务器还是不行 忽然想看看log&#xff0c;记录如下&#xff1a; [Fri Jul 15 00:41:03 2011] [notice] SELinux policy enabled; httpd running as context root:syste…

二叉排序树与文件操作的设计与实现_堆排序就这么简单

一、堆排序介绍来源百度百科&#xff1a;堆排序(Heapsort)是指利用堆积树&#xff08;堆&#xff09;这种数据结构所设计的一种排序算法&#xff0c;它是选择排序的一种。可以利用数组的特点快速定位指定索引的元素。堆分为大根堆和小根堆&#xff0c;是完全二叉树。前面我已经…

extjs 前端js代码调用后台函数方法

前端javascript代码部分&#xff1a; Ext.Ajax.request( { url: /Process/SuspendWorkFlow, //配置的后台函数路由 params: { wfInsId: wf.WFInstanceID, status: cmd }, //对应函数的参数 success: function () { LaunchedWFGrid.store.reload(); Ext.Msg.show({ title: &qu…