超簡潔又強大的幻燈片JS、CSS程式碼,相容性強
阿新 • • 發佈:2019-01-01
html,body {color:#333;font:12px Tahoma,Arial,宋體;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p{margin:0;padding:0} li {list-style-type:none;list-style-position:outside} img {border:medium none;vertical-align:top} input {vertical-align:middle;font-size:12px} button {vertical-align:middle;font-size:12px} ol, ul {list-style-image:none;list-style-position:outside;list-style-type:none} a {color:#363636;text-decoration:none;} .clear {clear:both;} .clearfix:after {clear:both;content:".";display:block;height:0;overflow:hidden;visibility:hidden} em {font-style:normal;} .wei{ width:100px; height:100px; background:#00C; margin-left:10px;} .img_show{ width:283px; height:194px; position:relative; margin:0 auto; margin-top:10px;} .img{ width:283px; height:194px; overflow:hidden;} .img ul li{ float:left; width:283px; height:194px;} .img ul{ width:1415px; height:194px; } .sz{position:absolute; right:5px; bottom:2px;} .sz ul li{ float:left; width:20px; height:20px; background:#0F0; color:#00C; margin:0 5px; z-index:100; text-align:center; line-height:20px; cursor:pointer;} .sz ul li.on{ background:#900; color:#FFF;}
<div class="con"> <div class="img_show"> <div class="sz"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="img"> <ul> <li><a href="http://www.cncco.com/"><img src="images/1.jpg" width="283" alt="css 特效" height="194"></a></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg" width="283" height="194"></li> <li><img src="images/4.jpg" width="283" height="194"></li> <li><img src="images/5.jpg" width="283" height="194"></li> </ul> </div> </div> </div>