`
timelessmemory
  • 浏览: 4645 次
  • 性别: Icon_minigender_1
  • 来自: 常州
社区版块
存档分类
最新评论

js仙剑六Tab选项卡

    博客分类:
  • js
js 
阅读更多

<!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>

分享到:
评论

相关推荐

    电脑设置鼠标指针更换仙剑奇侠传四鼠标指针

    3. 在打开的“鼠标属性”窗口中,切换到“指针”选项卡。在这里,你可以看到系统提供的各种鼠标指针样式。 4. 要应用新的“仙剑奇侠传四”指针,点击“浏览”按钮,找到你之前解压的"Cursors"文件夹,选择其中的....

    仙剑奇侠传1源码

    《仙剑奇侠传1》是中国游戏史上的一款经典之作,其源码的公开为游戏开发者提供了宝贵的参考资料。这款基于纯C语言编写的程序,展现了早期游戏开发的技术与设计理念。源码的可运行性使得我们有机会深入理解游戏的内部...

    Java仙剑奇侠传源代码

    《Java仙剑奇侠传源代码》是一款基于Java J2ME平台开发的手机游戏,它再现了经典单机游戏《仙剑奇侠传》的世界观和游戏机制。J2ME,全称为Java Micro Edition,是Java平台的一个子集,主要用于嵌入式设备和移动设备...

    手机JAR游戏 仙剑奇侠传

    手机JAR游戏 仙剑奇侠传 可以手机玩 也可以用手机JAR模拟器玩 仙剑1的PC移植版 移植程度大于95%,超级经典!!!

    仙剑手游完整的源代码

    根据提供的文件信息,“仙剑手游完整的源代码”这一标题及描述“仙剑手游源码”,主要涉及的是关于《仙剑》这款知名国产游戏的手游版本的源代码分享。接下来将从多个方面对这一主题进行详细解析,包括但不限于《仙剑...

    自己做的仙剑HTML网站

    2. 标题标签:在内,元素用来设置浏览器标签页上的标题,对于这个仙剑网站,可能是“仙剑奇侠传 - 网站”之类的标题。 3. 文本内容:在中,制作者可能使用了到(标题)、(段落)、(强调)、(加粗)等标签来组织...

    java仙剑奇侠传游戏

    《Java仙剑奇侠传游戏》是一款基于Java编程语言开发的简易版电子游戏,它将中国传统文化中的经典武侠故事——《仙剑奇侠传》融入到编程世界中,为玩家提供了一种独特的交互体验。这款游戏中包含了丰富的图像资源,...

    rix 仙剑音乐播放器

    "rix 仙剑音乐播放器"是一款基于DOS时代的经典游戏《仙剑奇侠传》设计的音乐播放软件,主要用于播放游戏中使用的rix格式的音乐文件。rix格式是专门为《仙剑奇侠传》游戏定制的一种音频格式,它包含了游戏中的背景...

    基于html5的仙剑奇侠传.zip

    六、未来发展趋势 随着HTML5技术的不断进步,更多高品质的HTML5游戏将涌现出来,且随着5G网络的普及,网络延迟问题将得到改善,HTML5游戏的体验将更加流畅。《仙剑奇侠传》的HTML5版本是这一趋势的一个实例,它预示...

    98仙剑源码,已编译好,带数据文件,完美运行

    《98仙剑奇侠传源码解析与技术探讨》 在游戏开发的历史长河中,98版的《仙剑奇侠传》无疑是中国PC游戏的经典之作,它以其动人的剧情、细腻的人物描绘和独特的游戏机制,赢得了无数玩家的喜爱。如今,这款作品的源码...

    另类仙剑

    《另类仙剑》是一款基于游戏编程类的资源,它包含了一个名为"另类仙剑.exe"的可执行文件。这个程序可能是一个独立的游戏或游戏模组,利用了控件技术来提供玩家交互体验。在IT领域,游戏编程类的项目通常涉及到多个...

    仿仙剑 DX rpg

    《仿仙剑 DX RPG》是一款基于经典角色扮演游戏《仙剑奇侠传》的复刻或致敬作品,使用了DX技术进行开发,旨在为玩家提供一个类似原版游戏体验的同时,利用现代技术提升画质和游戏性能。这个项目对于那些想要学习游戏...

    仙剑奇侠传DOS版地图编辑器等资料

    已经绝版的仙剑DOS编辑器,压缩包内还有一些其他相关的资料。文件列表: MapEditor,MKF文件工具,PalTools.NET,RGM文件工具,FBP文件.txt,M文件.txt,SSS文件.txt,场景号.txt,存档文件A.txt,存档文件B.txt,...

    新仙剑奇侠传源代码

    Unity3D是一款跨平台的游戏开发工具,它支持多种编程语言(如C#、JavaScript等),并且能够发布到多个平台上,包括Windows、Mac、Linux、Android、iOS等。由于其易用性及强大的功能,Unity3D已经成为游戏开发者们的...

    Unity3d 《新仙剑奇侠传》游戏源码

    《新仙剑奇侠传》是一款基于Unity3D引擎开发的知名角色扮演游戏,其源码提供了深入理解游戏开发过程和Unity3D引擎功能的宝贵机会。以下是对源码中的关键知识点进行的详细解读: 1. **Unity3D引擎**:Unity3D是一个...

    仙剑地图人物修改工具.rar

    《仙剑奇侠传》是一款深受玩家喜爱的经典角色扮演游戏,其95版本更是许多人的童年回忆。本压缩包“仙剑地图人物修改工具.rar”提供了一款基于.NET框架的工具,旨在帮助玩家和游戏开发者对游戏的人物、地图及对话内容...

    J2ME版仙剑奇侠传

    《J2ME版仙剑奇侠传》是一款基于Java 2 Micro Edition (J2ME) 平台开发的手机游戏,它将经典的仙剑奇侠传故事带到了移动设备上,让玩家能够在小巧的屏幕上体验到传统角色扮演游戏(RPG)的乐趣。这款游戏在设计时充分...

    仙剑奇侠传游戏

    《仙剑奇侠传》是一款深受玩家喜爱的经典角色扮演游戏,其在IT领域的独特之处在于它是由Java编程语言实现的。Java是一种广泛应用于网络、移动应用、服务器端开发的强大且跨平台的语言,因其“一次编写,到处运行”的...

    95仙剑源代码(网友制作)

    《95仙剑奇侠传》是中国游戏史上的一款经典之作,由大宇资讯的DOMO小组于1995年研发推出。这款游戏以其独特的故事情节、细腻的人物描绘和动人的音乐深受玩家喜爱,至今仍有着广泛的影响力。源代码是程序开发的核心,...

    Unity3D((4.x5.x)版本游戏源码(4.x)新仙剑奇侠传

    ### Unity3D 4.x/5.x 版本游戏源码——《新仙剑奇侠传》解析 #### 一、Unity3D引擎简介 Unity3D是一款由Unity Technologies开发的跨平台游戏开发引擎,支持多种平台的游戏开发,包括Windows、Mac、Linux、iOS、...

Global site tag (gtag.js) - Google Analytics