jQuery幻灯片

最新推荐文章于 2022-06-06 21:45:29 发布

雯靑爭

最新推荐文章于 2022-06-06 21:45:29 发布

阅读量293

点赞数 1

文章标签： jquery css css3

幻灯片（非3D模式）

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script language="javascript" src="jquery.js"></script>
<body>
 <div style=" width:800px; height:300px; border:9px solid #ccc; position:absolute; left:50%; top:50%; margin-top:-150px; margin-left:-400px; overflow:hidden; background:#D4D0B2;"></div>
</body>
<script>
	var j=1;
	function run_(){
		$("body>div>*").remove();
		for(i=0;i<5;i++){
			$("body>div").append("<div style='width:160px;height:300px;float:left;background:url(img/"+j+".jpg)-"+(i*160)+"px 0px;margin-top:300px;'></div>");
			//div边框分成5份高度不变还是300px，但长度变为原来的五分之一即为160px；浮动；背景添加图片，（i*160）为位移160像素，margin-top：300px为初始位置
			$("body>div>div:last").animate({marginTop:"0px"},(i+5)*100);
			//（i+5）*100是控制速度的
			}
			//以下整个for循环是焦点的设置
		for(i=1;i<5;i++){
				$("body>div").append("<span style='width:10px;height:10px;position:absolute;margin-top:280px;background:#fff;left:"+((i*20)+700)+"px;border-radius:5px;'></span>");//大小，绝对定位，据上位置，背景颜色；据左i*20 4个焦点 +700整体位移；圆角设置
		if(i==j){$("body>div>span:last").css({background:"#c00",height:"15px",width:"10px"})}
			}
			j++;if(j==5){j=1;}
		}
		setInterval(run_,1500);
</script>
</html>

雯靑爭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery幻灯片

幻灯片（非3D模式）<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><script language="javascript" src="jquery.js"></script><body> <div style=" width:800px; height:30
复制链接

扫一扫