关闭

jquery-图片特效,如何实现图片的轮换(一)

950人阅读 评论(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>






0
0

猜你在找
【直播】机器学习&深度学习系统实战(唐宇迪)
【直播】Kaggle 神器:XGBoost 从基础到实战(冒教授)
【直播回放】深度学习基础与TensorFlow实践(王琛)
【直播】计算机视觉原理及实战(屈教授)
【直播】机器学习之凸优化(马博士)
【直播】机器学习之矩阵(黄博士)
【直播】机器学习之概率与统计推断(冒教授)
【直播】机器学习之数学基础
【直播】TensorFlow实战进阶(智亮)
【直播】深度学习30天系统实训(唐宇迪)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:249822次
    • 积分:4664
    • 等级:
    • 排名:第6025名
    • 原创:199篇
    • 转载:3篇
    • 译文:0篇
    • 评论:48条
    博客专栏
    文章分类
    最新评论