特效描述：按钮控制 图片滚动 选项卡切换。jquerybanner按钮控制图片滚动选项卡切换插件
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.slide.js"></script>
2. HTML代码
<div class="layout"> <h2>淡隐淡现选项卡</h2> <div class="row2"> <div class="JQ-slide"> <ul class="JQ-slide-nav"> <li class="on"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> </ul> <div class="JQ-slide-content"> <ul class="newsList"> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> </ul> <ul class="newsList"> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> </ul> <ul class="newsList"> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> <li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li> </ul> </div> </div> </div> <h2>banner图片左右滚动</h2> <div class="w_ctr"> <div class="JQ-slide"> <ul class="JQ-slide-content"> <li><a href="http://www.51qianduan.com/"><img src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" width="297" height="181" alt="用jquery特效制作图片金字塔式放大缩小展示" /><span>用jquery特效制作图片金字塔式放大缩小展示</span></a> </li> <li><a href="http://www.51qianduan.com/"><img src="images/bb276cedeaeb0438ed3275a9711b1d69.jpg" width="297" height="181" alt="jquery特效制作 slide 图片窗帘式滚动" /><span>jquery特效制作 slide 图片窗帘式滚动</span></a></li> <li><a href="http://www.51qianduan.com/"><img src="images/761e64dd86a7ebd0919c18d0c04ebabb.jpg" width="297" height="181" alt="仿苹果视网膜效应的jQuery和CSS" /><span>仿苹果视网膜效应的jQuery和CSS</span></a></li> <li><a href="http://www.51qianduan.com/"><img src="images/9202c9767e0383e4db7ccecc92801d10.jpg" width="297" height="181" alt="斯莱德奥特提示使用jQuery和CSS3" /><span>斯莱德奥特提示使用jQuery和CSS3</span></a></li> </ul> <ul class="JQ-slide-nav"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> <h2>用按钮控制图片左右滚动</h2> <div class="hotPic"> <div class="JQ-slide"> <div class="JQ-slide-nav"><a class="prev" href="javascript:void(0);">‹</a><a class="next" href="javascript:void(0);">›</a></div> <div class="wrap"> <ul class="JQ-slide-content imgList"> <li> <a href="http://www.51qianduan.com/" class="img"><img src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" width="140" height="100" alt="用jquery特效制作图片金字塔式放大缩小展示" /></a> <a href="http://www.51qianduan.com/" class="txt">用jquery特效制作图片金字塔式放大缩小展示</a> </li> <li> <a href="http://www.51qianduan.com/" class="img"><img src="images/bb276cedeaeb0438ed3275a9711b1d69.jpg" width="140" height="100" alt="jquery特效制作 slide 图片窗帘式滚动" /></a> <a href="http://www.51qianduan.com/" class="txt">jquery特效制作 slide 图片窗帘式滚动</a> </li> <li> <a href="http://www.51qianduan.com/" class="img"><img src="images/761e64dd86a7ebd0919c18d0c04ebabb.jpg" width="140" height="100" alt="仿苹果视网膜效应的jQuery和CSS" /></a> <a href="http://www.51qianduan.com/" class="txt">仿苹果视网膜效应的jQuery和CSS</a> </li> <li> <a href="http://www.51qianduan.com/" class="img"><img src="images/9202c9767e0383e4db7ccecc92801d10.jpg" width="140" height="100" alt="斯莱德奥特提示使用jQuery和CSS3" /></a> <a href="http://www.51qianduan.com/" class="txt">斯莱德奥特提示使用jQuery和CSS3</a> </li> <li> <a href="http://www.51qianduan.com/" class="img"><img src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" width="140" height="100" alt="用jquery特效制作图片金字塔式放大缩小展示" /></a> <a href="http://www.51qianduan.com/" class="txt">用jquery特效制作图片金字塔式放大缩小展示</a> </li> <li> <a href="http://www.51qianduan.com/" class="img"><img src="images/bb276cedeaeb0438ed3275a9711b1d69.jpg" width="140" height="100" alt="jquery特效制作 slide 图片窗帘式滚动" /></a> <a href="http://www.51qianduan.com/" class="txt">jquery特效制作 slide 图片窗帘式滚动</a> </li> <li> <a href="http://www.51qianduan.com/" class="img"><img src="images/761e64dd86a7ebd0919c18d0c04ebabb.jpg" width="140" height="100" alt="仿苹果视网膜效应的jQuery和CSS" /></a> <a href="http://www.51qianduan.com/" class="txt">仿苹果视网膜效应的jQuery和CSS</a> </li> <li> <a href="http://www.51qianduan.com/" class="img"><img src="images/9202c9767e0383e4db7ccecc92801d10.jpg" width="140" height="100" alt="斯莱德奥特提示使用jQuery和CSS3" /></a> <a href="http://www.51qianduan.com/" class="txt">斯莱德奥特提示使用jQuery和CSS3</a> </li> </ul> </div> </div> </div> </div>
