带有控制按钮的图片滚动

上一次写了一个图片自动滚动功能,没有左右按钮控制的功能。今天花了点时间,写了一个带有左右按钮控制的图片滚动效果。所谓自动滚动,原理就是周期性的执行一个效果。在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,一经查实,立即删除!

相关文章

Win11代言人官宣

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

求余运算符

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

万箭齐发!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…

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;按回车键进入接口模式设置。 使用…

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

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

Tp框架如何使用事务和锁,还有查询缓存

1.事务 在ThinkPHP框架中&#xff0c;可以使用think\db\Transaction类来实现事务。 use think\Db; use think\db\Transaction;// 开始事务 Db::startTrans();try {// 执行数据库操作Db::table(user)->where(id, 1)->update([name > John]);// 提交事务Db::commit(); }…

因为没钱买衣服,我女朋友不要我了......

1 我妈为了省钱啥事都做得出▼2 高端的黄牛总是用最朴素的方法▼3 不加点什么你们觉得我阴阳怪气祖安大师怎么办&#xff1f;▼4 一天共有86400秒一天写2000首诗&#xff0c;也就是平均43.2秒一首曹植七步成诗也不过如此了▼5 如果在猫顺毛时弄乱它的毛会怎么样&#xff1…

Tech UP——EGO北京分会成立啦

古人崇敬自然&#xff0c;认为天地生万物而四时有序&#xff0c;是以春耕、夏耘、秋收、冬藏。在过去的8年里&#xff0c;InfoQ中国秉持着“促进软件开发领域知识与创新的传播”的理念&#xff0c;始终与技术人和公司在一起。经过8年的耕耘和沉淀&#xff0c;正是给大家呈现一些…

实现一个登录:Mac+.NET 5+Identity+JWT+VS Code

.NET圈儿的朋友们&#xff0c;大家好&#xff01;我可太喜欢如今开源的.Net了&#xff0c;写代码很巴适&#xff01;所以今天分享一下之前学习的一个登录小案例&#xff0c;代码有不足之处欢迎指正&#xff01;&#xff01;&#xff01;工具&#xff1a;采用VS Code及其插件开发…

天体运行动图,如此美妙,如此震撼!

全世界只有3.14 % 的人关注了爆炸吧知识三体中心天体也在运动双星系统银河系与仙女系相撞模拟转自&#xff1a;奇趣物理--完--

密封槽设计标准_哈尔滨轴承 | 超全面机械密封选型

有转动的地方&#xff0c;就有HRB轴承(400-086-6629)100多年来&#xff0c;人们采用填料一类的多种密封材料&#xff0c;使液体从液泵壳体沿着主轴的向外泄漏量不断减少。尽管现代工艺流程中采用的液泵&#xff0c;仍然广泛地沿用最古老的密封设计——填料盒&#xff0c;因为其…

重要更新,Office Add-in将全面支持Webview2

在陪娃上课&#xff0c;耳边回响着美妙的音乐&#xff0c;打开电脑码字&#xff0c;给大家分享一个非常重要的消息&#xff1a;Office Add-in将全面支持WebView2了。Office的开发爱好者可能会对此很感兴趣&#xff0c;虽然新一代的Web Add-in随着Office 365的推出&#xff0c;也…

哈佛学者:这3本英文名著,每天小读10分钟,英语level暴涨....

全世界只有3.14 % 的人关注了爆炸吧知识《锵锵》中窦文涛曾说过&#xff1a;“读原著学英语&#xff0c;就像有了可视化进度条&#xff0c;每天的提升肉眼可见。”今天就给大家推荐3本豆瓣高分英文名著&#xff0c;学英语不枯燥&#xff0c;每天小读10分钟&#xff0c;即可学到…

php -- 用文本来存储内容,file_put_contents,serialize,unserialize

根据存储的内容来划分 字符串&#xff1a; file_put_contents &#xff1a;将一个字符串写入文件 语法&#xff1a;int file_put_contents ( string $filename , mixed $data [, int $flags 0 [, resource$context ]] ) 参数 filename&#xff1a;要被写入数据的文件名。 data…

女朋友当众甩了我一巴掌,我扑上去......

1 小朋友&#xff0c;你是否有很多问号&#xff1f;▼2 小鸟&#xff1a;我呸&#xff01;秀什么秀&#xff1f;没眼看&#xff01;▼3 开学后你的上课状态......▼4 不能总让保安叔叔拿枪指我▼5 哥哥&#xff1a;让我看看&#xff0c;我妹妹怎么那么可爱&#xff01;▼6…