jQuery编写钟摆式滚动器
本文由发表于7年前 | Javascript | 评论数 1 |  被围观 4,995 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 Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 5/15
文章评论
    一条评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Java Web笔记 – 简单的权限管理控制实现 2011/11/12
2 Python语法笔记2 2014/3/9
3 碰撞球(连连看)游戏 连连看匹配算法分析与实现思路 2012/4/10
4 WebLogic服务器的安装,基本配置和使用 2011/11/30
5 JVM笔记 – 虚拟机执行子系统(虚拟机类加载机制) 2014/12/8
6 分享两款Javascript在线IDE 2013/1/11
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

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

联系我们:admin@itzhai.com

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