jQuery 简单滑动轮播图效果

一般页面简单轮播图效果用jQuery制作更加简单。我们来看看以下效果是如何来进行制作的。其html结构下所示：<div id="box"> <ul> <li><img src="taobao/01.jpg"></li> <li><img src="taobao/02.jpg"></li> <li><img src="taobao/03.jpg"></li> <li><img src="taobao/04.jpg"></li> <li><img src="taobao/05.jpg"></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div>CSS 如下所示：<style type="text/css"> *{margin: 0;padding: 0;} ul,ol{list-style: none;} #box{width: 490px; height: 170px; border:1px solid #aaa; margin: 100px auto; padding: 3px; position: relative; overflow:hidden;} #box ol{position: absolute; right:10px; bottom: 10px;} #box ol li{float: left; width: 20px; height: 20px; background-color: #fff; margin: 3px; text-align: center;line-height: 20px; color: #000;cursor: pointer;border:1px solid #aaa;} #box ol li.current{background-color: #ff0;}</style>然后，是js效果了：<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/Javascript"> $(document).ready(function() { $("#box ol li").mouSEOver(function(event) { var index=$(this).index(); // 获取当前的索引号 $("#box ul li").eq(index).fadeIn().siblings().hide(); $(this).addClass('current').siblings().removeClass('current'); }); });</script>详细的详细操作请参看免费jQuery轮播图视频：

http://www.tudou.com/PRograms/view/aC8BR8RyKIg/最后附上这个demo： http://pan.baidu.com/s/1eQsxPN8

本文章引自于：http://www.xiaoqiang001.com/a/wangyetexiao/20140715/10.html