特效描述:带按钮 图片滚动切换。jQuery slider带按钮图片滚动切换特效代码下载
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/style.css" />
2. 引入JS
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/slide.js"></script>
3. HTML代码
<div class="slide-pics" id="banner-slide"> <div class="scrollable"> <ul class="items cls"> <li class="item"> <a href="https://www.51qianduan.com/">51前端</a> <div class="info-wrapper"> <div class="info-background"></div> <div class="pic-info"> <h3>QQ空间</h3> <p><span class="orange">小编推荐:</span>致力于帮助用户随时随地“分享生活,留住感动</p> <a href="https://www.51qianduan.com/">51前端</a> </div> </div> </li> <li class="item"> <a href="https://www.51qianduan.com/">51前端</a> <div class="info-wrapper"> <div class="info-background"></div> <div class="pic-info"> <h3>中国越野拉力赛</h3> <p><span class="orange">小编推荐:</span>全面详解第一届中国越野拉力赛</p> <a href="https://www.51qianduan.com/">51前端</a> </div> </div> </li> <li class="item"> <a href="https://www.51qianduan.com/">51前端</a> <div class="info-wrapper"> <div class="info-background"></div> <div class="pic-info"> <h3>我叫MT</h3> <p><span class="orange">小编推荐:</span>2013最火卡牌手游,纯正的魔兽题材</p> <a href="https://www.51qianduan.com/">51前端</a> </div> </div> </li> <li class="item"> <a href="https://www.51qianduan.com/">51前端</a> <div class="info-wrapper"> <div class="info-background"></div> <div class="pic-info"> <h3>高端指南:有品位也要有内涵</h3> <p><span class="orange">小编推荐:</span>笑一个吧,内涵世界里多欢乐!</p> <a href="https://www.51qianduan.com/">51前端</a> </div> </div> </li> <li class="item"> <a href="https://www.51qianduan.com/">51前端</a> <div class="info-wrapper"> <div class="info-background"></div> <div class="pic-info"> <h3>发现最美应用</h3> <p><span class="orange">小编推荐:</span>体验与品位并存</p> <a href="https://www.51qianduan.com/">51前端</a> </div> </div> </li> </ul> </div> <div class="cover coverleft"></div> <div class="cover coverright"></div> <div class="prev prev-next s-index-icon">上一张</div> <div class="next prev-next s-index-icon">下一张</div> </div>