特效描述:點擊圖標切換 選項卡切換 圖片滑動切換 切換 效果,
代碼結構
1. 引入CSS
<link href="demo.css" type="text/css" rel="stylesheet">
2. 引入JS
<script src="jquery.min.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script>
3. HTML代碼
<div id="main"> <div id="gallery"> <div id="slides" style="width: 3680px; margin-left: 0px;"> <div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/macbook.jpg"></div> <div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/iphone.jpg"></div> <div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/imac.jpg"></div> <div class="slide"><a target="_blank" href="http://www.dijiuzhanzhang.com/"><img width="920" height="400" alt="side" src="img/sample_slides/info.jpg"></a></div> </div> <div id="menu"> <ul> <li class="fbar inact"> </li><li class="menuItem inact act"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_macbook.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_iphone.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_imac.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_about.png"></a></li> </ul> </div> </div> </div>