提示：您可以先修改部分代碼再運行
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>css實現投影片</title><style type="text/css">a{color:#444; text-decoration: none;}a:hover{color:#ff0000;}.slider-con{width:310px; height: 310px; overflow: hidden; margin: 20px auto;}.slider-con div{position: relative; width: 310px; height: 310px;}.slider-con div img{max-width:300px; height: auto; display: block; margin-bottom: 20px;}.slider-con div{text-align: center;}</style></head><body><div class="slider-con"><div id="pic0">上一張下一張</div><div id="pic1">上一張下一張</div><div id="pic2">上一張下一張</div></div><style type="text/css">.slide2-con{margin: 0 auto; width:400px;}.slide2-con .slide2-box{width:400px; height: 400px; overflow: hidden; margin: 20px auto;}.slide2-con .slide2-box div{width:400px; height: 400px;}.slide2-con .slide2-box div img{height: 400px;}.slide2-nav a{display:inline-block; *display:inline; *zoom:1; width:40px; height: 40px; margin-top: 20px;}.slide2-nav img{width:40px; height: 40px;}</style><div class="slide2-con"><div class="slide2-box"><div id="a1"></div><div id="a2"></div><div id="a3"></div><div id="a4"></div></div><div class="slide2-nav clearfix">關閉</div><div class="clear"></div></div><style type="text/css">.slide3-con{height: 500px; width:750px; overflow: hidden; background: #eee; margin: 20px auto;}.slide3-con div{width:730px; height: 480px; text-align: center; position: relative; padding: 10px;}.slide3-con .main-img{position: relative; z-index: 2; text-align: center; margin: 0 auto; border:10px solid #fff; width: 480px; height: 360px;}.slide3-con div .pre, .slide3-con div .next{position: absolute; left:10px; top:50%; margin-top:-60px; border:10px solid #fff;z-index: 1;}.slide3-con div .pre img, .slide3-con div .next img{width:180px; height: 120px;filter:alpha(opacity=40); opacity: .4; position: relative; display: block;}.slide3-con div .next{left:auto; right:10px;}.slide3-con div a:hover{z-index: 3;}.slide3-con div a:hover img{opacity: .8; filter:alpha(opacity=80);}</style><div class="slide3"><div class="slide3-con"><div id="b1"><h3>測試內容</h3><p>測試分行</p></div><div id="b2"><h3>測試內容</h3><p>測試分行</p></div><div id="b3"><h3>測試內容</h3><p>測試分行</p></div></div></div><style type="text/css">.slide4 ul{width:120px;position: relative; height: 500px; margin: 20px auto;}.slide4 ul li{float: left; list-style: none;}.slide4 ul li img{width:30px; height: 30px;}.slide4 ul b{position: absolute; left:-400px; top:0; visibility:hidden;opacity: 0; filiter:alpha(opacity=0); filter:progid:DXImageTransform.Miscrosoft.Alpha(opacity=0); -webkit-transition:all .6s ease-in-out;}.slide4 ul b img{width:300px; height: 300px; -webkit-transform:scale(0); -webkit-transition:-webkit-transform .6s ease-in-out;}.slide4 ul li a:hover b{opacity: 1; filter:alpha(opacity=100); filter:progid:DXImageTransform.Miscrosoft.Alpha(opacity=100); visibility:visible;}.slide4 ul li a:hover b img{ -webkit-transform:scale(1);}</style><div class="slide4"><ul><li><b></b></li><li><b></b></li><li><b></b></li><li><b></b></li></ul></div></body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
