CSS3 幻灯片

最新推荐文章于 2025-07-23 16:27:24 发布

原创最新推荐文章于 2025-07-23 16:27:24 发布 · 置顶 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3动画 #CSS3 #CSS幻灯片 #幻灯片特效 #CSS3制作幻灯片特效

CSS3 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style id="css">
body,ul,ol{margin:0;padding:0;}
li{ list-style:none;}
.wrap{width:800px;margin:100px auto 0;}
#picList{width:800px;height:360px; -webkit-perspective:800px; } 
#picList li{width:25px;height:360px; position:relative; -webkit-transform-style:preserve-3d; -webkit-transform-origin:center center -180px;float:left;}
#picList a{width:100%;height:100%; position:absolute;left:0;top:0;}
#picList li a:nth-of-type(1){ background:url(img/1.JPG)no-repeat }
#picList li a:nth-of-type(2){ background:url(img/2.JPG) no-repeat; top:-360px; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg)}
#picList li a:nth-of-type(3){ background:url(img/3.JPG)no-repeat; -webkit-transform:translateZ(-360px) rotateX(180deg);}
#picList li a:nth-of-type(4){ background:url(img/4.JPG)no-repeat; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); top:360px;}
#picList li span{ position:absolute;width:360px;height:360px;background:#333;}
#picList li span:nth-of-type(1){ -webkit-transform-origin:left; -webkit-transform:rotateY(90deg);left:0;}
#picList li span:nth-of-type(2){ -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);right:0;}

#btns{float:right; padding:10px 0;}
#btns li{width:40px;height:40px;background:#000;color:#fff; border-radius:50%; font:italic 30px/40px Arial;float:left;margin:0 5px; text-align:center; cursor:pointer;}
#btns .active{ background:#f60;}
</style>
<script>
window.onload=function()
{
	var oPicList=document.getElementById("picList");
	var oCss=document.getElementById("css");
	var aBtns=document.getElementById("btns").getElementsByTagName("li");
	var aLi=null;
	var sLi="";
	var sCss="";
	var iLiw=25;
	var iZindex=0;
	var iNow=0;
	var iLength=oPicList.clientWidth/iLiw;
	for(var i=0;i<iLength;i++)
	{
		i>iLength/2?iZindex--:iZindex++;
		sLi+='<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';
		sCss+="#picList li:nth-of-type("+(i+1)+") a{ background-position:-"+i*iLiw+"px 0;}";
		sCss+="#picList li:nth-of-type("+(i+1)+"){z-index:"+iZindex+"}";
		
	}
	oPicList.innerHTML=sLi;
	oCss.innerHTML+=sCss;
	aLi=oPicList.children;
	for(var i=0;i<aBtns.length;i++)
	{
		(function(a){
			aBtns[a].onclick=function()
			{
				for(var i=0;i<aLi.length;i++)
				{
					aLi[i].style.transition="0.5s "+i*50+"ms";
					aLi[i].style.WebkitTransform="rotateX(-"+a*90+"deg)";
				}	
				this.className="active";
				aBtns[iNow].className="";
				iNow=a;
			};	
		})(i)
	}
};
</script>
</head>
<body>
<div class="wrap">
	<ul id="picList">
    	
    </ul>
    <ol id="btns">
    	<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>
</body>
</html>