jQuery编写钟摆式滚动器
本文由发表于7年前 | Javascript | 评论数 1 |  被围观 4,088 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 配置Maven项目自动编译 2014/12/9
2 JVM笔记 – 程序编译与代码优化(早期(编译期)优化) 2015/3/1
3 J2EE分层架构中的参数和异常处理 2012/9/15
4 hibernateTemplate.executeFind(new HibernateCallback())出现NullPointerException空指针的解决方法 2011/9/21
5 ExtJS拖放技术DragSource拖动到指定区域DDTarget 2011/4/13
6 从一笔交易说起,如何处理好数据的一致性问题 2018/3/28
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

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

联系我们:admin@itzhai.com

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