js仙剑六Tab选项卡

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>xj</title>
<style>
body, div, ul, ol, li {
    margin: 0;
    padding: 0;
}

ol, ul {
    list-style:none;
}

a {
    text-decoration:none;
}

.wrap {
    background: url(http://pal6images.roogames.com/xianjian6x/images/big.jpg) no-repeat center top;
    width: 100%;
    height: 332px;
}

.wrap-bg {
    width: 1000px;
    height: 330px;
    margin: 0 auto;
    position: relative;
}

.wrap-btns {
    height: 171px;
    width: 980px;
    padding: 10px;
    position: absolute;
    z-index: 2;
}

.wrap-btns li {
    float: left;
    width: 80px;
    height: 181px;
}

#rightSpace {
    margin-right: 500px;
}

.wrap-btns li a {
    display: inline-block;
    background: url(http://pal6images.roogames.com/xianjian6x/images/figure.png) no-repeat;
    width: 100%;
    height: 100%;
}

.show-bg {
    width: 1000px;
    height: 330px;
    position: absolute;
    top: 0;
    z-index: 1;
}

.click_out .pic1 { background-position: -2px -3px;}
.click_out .pic2 { background-position: -81px -3px;}
.click_out .pic3 { background-position: -160px -3px;}
.click_out .pic4 { background-position: -239px -3px;}
.click_out .pic5 { background-position: -318px -3px;}
.click_out .pic6 { background-position: -397px -3px;}

.pic1:hover { background-position: -2px -199px;}
.pic2:hover { background-position: -81px -199px;}
.pic3:hover { background-position: -160px -199px;}
.pic4:hover { background-position: -239px -199px;}
.pic5:hover { background-position: -319px -199px;}
.pic6:hover { background-position: -397px -199px;}

.click_in .pic1 { background-position: -2px -199px;}
.click_in .pic2 { background-position: -81px -199px;}
.click_in .pic3 { background-position: -160px -199px;}
.click_in .pic4 { background-position: -239px -199px;}
.click_in .pic5 { background-position: -319px -199px;}
.click_in .pic6 { background-position: -397px -199px;}

</style>
</head>

<body>
    <div class="wrap">
        <div class="wrap-bg">
            <ul class="wrap-btns">
                <li class="click_in"><a href="javascript:void(0)" class="pic1"></a></li>
                <li class="click_out"><a href="javascript:void(0)" class="pic2"></a></li>
                <li id="rightSpace" class="click_out">
                    <a href="javascript:void(0)" class="pic3"></a>
                </li>
                <li class="click_out"><a href="javascript:void(0)" class="pic4"></a></li>
                <li class="click_out"><a href="javascript:void(0)" class="pic5"></a></li>
                <li class="click_out"><a href="javascript:void(0)" class="pic6"></a></li>
            </ul>
            <div class="show-bg" style="background:url(http://pal6images.roogames.com/xianjian6x/images/big1.jpg) no-repeat"></div>
        </div>
    </div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function() {
        var _btnIndex = 0;
        var timer = null;

        $('.wrap-btns li').click(function() {
            var _this = $(this);
            clickIn(_this);
        });

        function clickIn(_this) {
            if (_btnIndex == _this.index())
                return;

            _btnIndex = _this.index();

            _this
            .attr('class', 'click_in')
            .siblings().attr('class', 'click_out');

            $('.show-bg')
            .css('display', 'none')
            .css('background', 'url(http://pal6images.roogames.com/xianjian6x/images/big' + (_btnIndex + 1) + '.jpg) no-repeat')
            .stop(true, true)
            .fadeIn(300);
        }

        timer = setInterval(autoPlay, 3000);

        $('.wrap').hover(function() {
            clearInterval(timer);
        }, function() {
            timer = setInterval(autoPlay, 3000);
        });

        function autoPlay() {
            _btnIndex < $('.wrap-btns li').length - 1 ? _btnIndex++ : _btnIndex = 0;

            $('.wrap-btns li')
            .eq(_btnIndex).attr('class', 'click_in')
            .siblings().attr('class', 'click_out');

            $('.show-bg')
            .css('display', 'none')
            .css('background', 'url(http://pal6images.roogames.com/xianjian6x/images/big' + (_btnIndex + 1) + '.jpg) no-repeat')
            .fadeIn(300);
        }
    })
</script>

js仙剑六Tab选项卡

猜你喜欢