游戏网站jQuery手风琴切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是游戏网站jQuery手风琴切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>游戏网站jQuery手风琴切换</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<link href="css/zzsc.css" type=text/css rel=stylesheet>
</head>
<body>
<div class="box-zzsc">
	<ul>
	   <li><span class=current><code class=djt>▼</code>迷宫寻宝　挑战神秘</span><a href="#" target=_blank><img src="images/1.jpg"></a> </li>
	  <li><span><code class=djt>▼</code>幻想副本　天马行空</span><a href="#" target=_blank><img src="images/2.jpg"></a> </li>
	  <li><span><code class=djt>▼</code>个性装饰　炫酷造型</span><a href="#" target=_blank><img src="images/3.jpg"></a> </li>
	  <li><span><code class=djt>▼</code>武侠奇幻　双剑合壁</span><a href="#" target=_blank><img src="images/4.jpg"></a> </li>
	  <li><span><code class=djt>▼</code>家园庭院　第二人生</span><a href="#" target=_blank><img src="images/5.jpg"></a> </li>
	  <li><span><code class=djt>▼</code>现代元素　梦想首创</span><a href="#" target=_blank><img src="images/6.jpg"></a> </li>
	  <li class=last><span><code class=djt>▼</code>史诗剧情　阵营纷争</span><a href="#"target=_blank><img src="images/7.jpg"></a> 
	</li>
	</ul>
</div>
<script src="js/jQuery-1.4.1.min.js"></script>
<script src="js/jquery.easing.1.3.js" type=text/javascript></script>
<script type=text/javascript>
$(function(){
    var j = 0,k = 0,id = 0;
    init();
    $.each( [0,1,2,3,4,5,6], function(m){
        $("div.box-zzsc>ul>li").eq(m).find("span").click(function () {
            $.each( [0,1,2,3,4,5,6], function(i){
                $("div.box-zzsc>ul>li").eq(i).find("span").removeClass("current");
                $("div.box-zzsc>ul>li").eq(i).find("img").hide();
            });
            $("div.box-zzsc>ul>li").eq(m).find("span").addClass("current");
            $("div.box-zzsc>ul>li").eq(m).find("img").fadeIn({queue:false, duration:100, easing:"easeInSine"});
            j = m + 1;
            clearTimeout(id);
            id = setTimeout(function(){init()},6000);
        });       
    });
    function init()
    {        
        $.each( [0,1,2,3,4,5,6], function(n){
            $("div.box-zzsc>ul>li").eq(n).find("span").removeClass("current");
            $("div.box-zzsc>ul>li").eq(n).find("img").hide();
        });
        k = j%7;
        $("div.box-zzsc>ul>li").eq(k).find("span").addClass("current");
        $("div.box-zzsc>ul>li").eq(k).find("img").fadeIn({queue:false, duration:100, easing:"easeInSine"});
        j = j+1;
        id = setTimeout(function(){init()},4000);
    }
});
$(".t1 a").click(function(){
 dialog("邀请朋友一起玩吧","id:tc","300px","auto","id");
});
var miso_a = mx_ver;
var miso_c = mx_verNum;
$('div.down').find('a').attr('href', miso_a);
$('div.down>a').find('span').html(miso_c);
</script>
</body>
</html>

CSS代码(zzsc.css):

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
em,i{font-style:normal;}
b{font-weight:normal;}
h1,h2,h3,h4{font-size:14px;}
h5{font-size:12px;}
h6{font-size:12px;font-weight:normal;}
.box-zzsc{BACKGROUND:url(../images/bg01.png) no-repeat 6px 0px;MARGIN:0px auto;OVERFLOW:hidden;WIDTH:917px;HEIGHT:248px}
.box-zzsc UL{MARGIN:7px 0px 0px 60px;OVERFLOW:hidden;WIDTH:867px;HEIGHT:225px}
.box-zzsc UL LI{DISPLAY:inline;FLOAT:left;font-size:14px;}
.box-zzsc UL LI IMG{DISPLAY:none}
.box-zzsc SPAN{PADDING-RIGHT:14px;DISPLAY:inline;PADDING-LEFT:12px;FONT-WEIGHT:bold;FLOAT:left;PADDING-BOTTOM:0px;WIDTH:20px;CURSOR:pointer;WORD-BREAK:normal;LINE-HEIGHT:140%;PADDING-TOP:5px;HEIGHT:223px;TEXT-ALIGN:right;WORD-WRAP:break-word}
.box-zzsc SPAN .djt{PADDING-RIGHT:0px;PADDING-LEFT:0px;FONT-SIZE:8px;PADDING-BOTTOM:0px;MARGIN:0px 3px 0px 0px;PADDING-TOP:0px;TEXT-ALIGN:center}
.box-zzsc .last SPAN{PADDING-RIGHT:14px;PADDING-LEFT:14px;PADDING-BOTTOM:0px;PADDING-TOP:5px}
.box-zzsc .current{COLOR:#fff}
.box-zzsc .last img{width:526px;}

附件:下载该文件资源,减少时间成本(增值服务)