jquery-图片特效，如何实现图片的轮换（一）

最新推荐文章于 2015-06-23 14:48:00 发布

hexudong08

最新推荐文章于 2015-06-23 14:48:00 发布

阅读量1.4k

点赞数 1

分类专栏： ruby on rails 资料整理 jquery jquery 插件 jquery图片特效 js特效基础文章标签： function float div css

本文链接：https://blog.csdn.net/hexudong08/article/details/7205728

版权

ruby on rails 同时被 3 个专栏收录

105 篇文章 0 订阅

订阅专栏

jquery

12 篇文章 0 订阅

订阅专栏

jquery 插件

8 篇文章 0 订阅

订阅专栏

问题：如何实现图片的轮换效果？如 http://wo.rayclear.com首页的图片轮换
问题解答：
1, 先准备dom结构

<div id="imgPlay">
	<ul>
		<li><img src="http://wo.rayclear.com/images/01.png" /></li>

		<li><img src="http://wo.rayclear.com/images/02.png" /></li>
		<li><img src="http://wo.rayclear.com/images/03.png" /></li>
	</ul>
</div>

用一个div#imgPlay包着ul,并且固定div的高度和宽度，设置overflow:hidden;这样，下面的ul就通过轮换来显示效果。

2，css样式

	div#imgPlay{width:707px;overflow:hidden;height:372px;}
	ul, li {margin: 0;display:block; padding:0;}
	ul{list-style-type: none;}
	ul li {float:left;width:707px;}

将图片显示在一个固定的区域中

3，实现图片轮换的效果

	$(function(){
			var w = 707;
			var l = $("ul li").length;
			var speed = 500;
			var i = 1;
			$("ul").width(w*l);
			setInterval(function(){
				i = (i+1) % l;
				$("ul").css("marginLeft", "-"+i*w+"px");
			},3000);
    });

4，完整代码如下

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/javascripts/jquery.js">
</script>
	<title>Actor</title>

</head>
<body>
<div id="imgPlay">
	<ul>
		<li><img src="http://wo.rayclear.com/images/01.png" /></li>

		<li><img src="http://wo.rayclear.com/images/02.png" /></li>
		<li><img src="http://wo.rayclear.com/images/03.png" /></li>
	</ul>
</div>
</body>
<style type="text/css" media="screen">
	div#imgPlay{width:707px;overflow:hidden;height:372px;}
	ul, li {margin: 0;display:block; padding:0;}
	ul{list-style-type: none;}
	ul li {float:left;width:707px;}
</style>
<script type="text/javascript" charset="utf-8">
	$(function(){
			var w = 707;
			var l = $("ul li").length;
			var speed = 500;
			var i = 1;
			$("ul").width(w*l);
			setInterval(function(){
				i = (i+1) % l;
				$("ul").css("marginLeft", "-"+i*w+"px");
			},3000);
    });

</script>
</html>

hexudong08

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery-图片特效，如何实现图片的轮换（一）

问题：如何实现图片的轮换效果？如 http://wo.rayclear.com首页的图片轮换问题解答：1, 先准备dom结构用一个div#imgPlay包着ul,并且固定div的高度和宽度，设置overflow:hidden;这样，下面的ul就通过轮换来显示效果。2，css样式 div#imgPlay{width:707px;overf
复制链接

扫一扫