选项卡js代码段

js示例代码

$(function () {
        var oFocus = $('#focus'),
                oRight = oFocus.find('.right'),
                oLeft = oFocus.find('.left'),
                aRLi = oRight.find('li'),
                aLLi = oLeft.find('li'),
                index = 0,
                timer = null;
        aRLi.click(function () {
            index = $(this).index()
            $(this).addClass('active').siblings().removeClass();
            aLLi.eq(index).addClass('active').siblings().removeClass();
            aLLi.eq(index).stop().animate({'opacity': 1}, 300).siblings().stop().animate({'opacity': 0}, 300);
            stopFoucs();
        })
        oLeft.mouseenter(function () {
            stopFoucs();
        }).mouseleave(function () {
            startFocus();
        });
        timer = setInterval(function () {
            startFocus();
        }, 5000);
        function startFocus() {
            index++;
            index = index > aRLi.size() - 1 ? 0 : index;

            aLLi.eq(index).addClass('active').siblings().removeClass();
            aLLi.eq(index).stop().animate({'opacity': 1}, 300).siblings().stop().animate({'opacity': 0}, 300);
            aRLi.eq(index).addClass('active').siblings().removeClass();
        }

        function stopFoucs() {
            clearInterval(timer);
        }
    })

html部分

<div class="focus" id="focus">
            <div class="left">
                <ul>
                    <li class="active" style="opacity:1; filter:alpha(opacity=100);">
                        <p>优惠券</p>
                        <p>......</p>
                        <img src="images/marketing/yhq3.png"/></li>
                    <li>
                        <p>积分兑换</p>
                        <p></p>
                        <img src="images/marketing/jfdh3.png"/>
                    </li>
                    <li>
                        <p>储值管理</p>
                        <p></p>
                        <img src="images/marketing/cz3.png"/>

                    </li>
                    <li>
                        <p>电子会员</p>
                        <p></p>
                        <img src="images/marketing/hy3.png"/></li>
                    <li>
                        <p>卡券管理</p>
                        <p></p>
                        <img src="images/marketing/kq3.png"/></li>
                    <li>
                        <p>活动设置</p>
                        <p></p>
                        <img src="images/marketing/hd3.png"/></li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li class="active"><i class="i1"></i>优惠券</li>
                    <li><i class="i2"></i>积分兑换</li>
                    <li><i class="i3"></i>储值管理</li>
                    <li><i class="i4"></i>电子会员</li>
                    <li><i class="i5"></i>卡券管理</li>
                    <li><i class="i6"></i>活动设置</li>
                </ul>
            </div>
        </div>