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