特效描述:jQuery 仿百度相框 图片列表切换展示。图片相册,百度相框,图片相框,图片列表,图片切换,列表切换,图片展示,百度图片展示。希望更多的朋友共享代码
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.10.1.js"></script> <script type="text/javascript" src="js/my.js"></script>
2. HTML代码
<div class="base"> <div class="base_two"> <div class="base_left"><span class="jiantou_left"></span></div> <div class="content"></div> <div class="base_right"><span class="jiantou_right"></span></div> </div> <div class="toggle"><div class="list">|图片列表<span></span> </div></div> <div class="bottle"> <span class="l"></span> <div id="list_shot"> <ul> <li><img src="photos_file/0.jpg" width="115px" height="100px"></li> <li><img src="photos_file/1.jpg" width="115px" height="100px"></li> <li><img src="photos_file/2.jpg" width="115px" height="100px"></li> <li><img src="photos_file/3.jpg" width="115px" height="100px"></li> <li><img src="photos_file/4.jpg" width="115px" height="100px"></li> <li><img src="photos_file/5.jpg" width="115px" height="100px"></li> <li><img src="photos_file/6.jpg" width="115px" height="100px"></li> <li><img src="photos_file/7.jpg" width="115px" height="100px"></li> <li><img src="photos_file/8.jpg" width="115px" height="100px"></li> <li><img src="photos_file/9.jpg" width="115px" height="100px"></li> <li><img src="photos_file/8.jpg" width="115px" height="100px"></li> <li><img src="photos_file/7.jpg" width="115px" height="100px"></li> <li><img src="photos_file/6.jpg" width="115px" height="100px"></li> <li><img src="photos_file/5.jpg" width="115px" height="100px"></li> <li><img src="photos_file/0.jpg" width="115px" height="100px"></li> <li><img src="photos_file/1.jpg" width="115px" height="100px"></li> <li><img src="photos_file/2.jpg" width="115px" height="100px"></li> <li><img src="photos_file/3.jpg" width="115px" height="100px"></li> <li><img src="photos_file/4.jpg" width="115px" height="100px"></li> <li><img src="photos_file/5.jpg" width="115px" height="100px"></li> <li><img src="photos_file/6.jpg" width="115px" height="100px"></li> <li><img src="photos_file/7.jpg" width="115px" height="100px"></li> <li><img src="photos_file/8.jpg" width="115px" height="100px"></li> <li><img src="photos_file/9.jpg" width="115px" height="100px"></li> <li><img src="photos_file/8.jpg" width="115px" height="100px"></li> <li><img src="photos_file/7.jpg" width="115px" height="100px"></li> <li><img src="photos_file/6.jpg" width="115px" height="100px"></li> <li><img src="photos_file/5.jpg" width="115px" height="100px"></li> </ul> </div> <span class="r"></span> </div> </div>