问题:如何实现图片的轮换效果?如 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>