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{ 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; 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