jQuery编写钟摆式滚动器
本文由发表于7年前 | Javascript | 评论数 1 |  被围观 4,091 views+

一组由8幅图组成的图片,初始时显示前面4张,点击图片下面的向左按钮,图片向左滚动最后显示后面4张图片,可以按左右按钮来回滚动图片。
首先编写HTML代码:
<div id="scroller">
	<div id="images">
		<img src="01.jpg" width="114px" height="90px" />
		<img src="02.jpg" width="114px" height="90px" />
		<img src="03.jpg" width="114px" height="90px" />
		<img src="04.jpg" width="114px" height="90px" />
		<img src="05.jpg" width="114px" height="90px" />
		<img src="06.jpg" width="114px" height="90px" />
		<img src="07.jpg" width="114px" height="90px" />
		<img src="08.jpg" width="114px" height="90px" />
	</div>
</div>

<div id="direction">
	<img src="left.jpg" width="40px" height="40px" class="left_arrow" />
	<img src="right.jpg" width="40px" height="40px" class="right_arrow" />
</div>

<div id="scroller">显示图片的div,只显示四幅图片

CSS样式控制如下:
<style type="text/css">
#scroller {
position:relative;
height:90px;
width:480px;
margin:auto;
overflow:hidden;
}
#images{
width:970px;
height:90px;
}
#images img{
position:relative;
}
#direction {
width:480px;
height:150px;
margin:auto;
}
.left_arrow {
float:left;
margin-top:10px;
margin-left:20px;
cursor:pointer;
}
.right_arrow {
float:right;
margin-top:10px;
margin-right:20px;
cursor:pointer;
}
</style>
这里需要注意的就是#scroller要设置position:relative; 并且设置#images img{position:relative;}
这样才能让图片滚动。
接下来是使用jQuery代码编写响应事件:
<script type="text/javascript">
$(document).ready(function() {
	var $wrapper=$('#images img');

	//使用animate创建两个自定义动画
	var scrollleft=function(imgblock) {
		imgblock.animate({left:-485},2000);
	}	
	var scrollright=function(imgblock) {
		imgblock.animate({left:0},2000);
	}
	//为div按钮添加单击事件
	$('.left_arrow').click(function(event){
		scrollleft($wrapper);
		event.preventDefault();
	});
	$('.right_arrow').click(function(event){
		scrollright($wrapper);
		event.preventDefault();
	});
});	
</script>
运行效果图如下:
jQuery钟摆式滚动器

jQuery钟摆式滚动器

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/jquery-scroll-written-pendulum-device.html
关键字: ,
arthinking 指弹吉他 && 技术 more
分享到:
 
2011 5/15
文章评论
    一条评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 使用Eclipse开发Java Web过程中Debug调试的使用方法 2011/9/10
2 Hibernate继承映射策略之每棵类继承树一张表 2011/5/25
3 AtomicInteger的介绍和使用 2012/7/30
4 使用Velocity生成静态页面减轻数据库压力提升网站性能 2011/10/5
5 Java基础笔记 – static与final关键字及其编写细节提示 2011/10/26
6 8259A初始化过程步骤 2011/4/25
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.