宝のトップページの効果図をまねる(比較的に完備している)


これは主に作ったプロジェクトの中で使う効果図で、献上します
主なコードは実は前のブログでも体現されています.、
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<title>   </title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

$(function(){	
  var bn_alp;//       
  var Time = 3000;//            
  var num = 1000;//             
  var page = 0;//     
  var len = $( ".bn-alp .box li" ).length;//        
  $( ".bn-alp .box li" ).each(function()
  {
    $(this).css( "opacity", 0 );
    $(this).css( "background-image","url(" + $(this).find('img.bg').attr('src') + ")");
    //$( ".bn-alp .i" ).append('<i></i>');
  });   //            0
  $( ".bn-alp .box li:first" ).css( "opacity", 1 ); //               1
  $( ".i i" ).eq(0).addClass("on");
  function fun()//   
  {
    $( ".i i" ).eq(page).addClass("on").siblings('i').removeClass( "on" );     //     
    $( ".bn-alp .box li" ).eq(page).addClass("on").animate({"opacity":1},num).siblings('li').removeClass( "on" ).animate({"opacity":0},num);//     
  }
  function run()//   
  {
    if( !$(".bn-alp .box li" ).is( ":animated" ))//   li     
    {
      if( page == len - 1 )//               
      {
        page = 0;  //  page   0          
        fun();
      } else {//        
        page++;
        fun();
      }
    }
  }
  $(".i i").mouseover( function()//     
  {
	  clearInterval( bn_alp );
   // if( !$( ".bn-alp .box li" ).is( ":animated" ) )//   li     
    //{
      var index = $( ".i i" ).index( this );//          
      page = index;//    page
      fun();
   // }
  });
  $( ".i" ).hover(function()//               
  {
    clearInterval( bn_alp );
  },function()//                 
  {
    bn_alp = setInterval( run, Time );
  }).trigger( "mouseleave" );
});
</script>

</head>
<body class="wrap-bg">
<div class="iscroll">
	<div class="hd" id="hd">
    	<div class="hd-in">
        	<span class="logo-1">   </span>
            <span class="logo-2"><em>M</em>ACRO-<em>F</em>INANCE</span>
            <span class="logo-3">      ,    </span>
           <div class="hd-r">
            	<a href="index.html" target="_blank" class="def on">  </a>
                <a href="introduce.html" target="_blank" class="def">    </a>
                <a href="###" target="_blank" class="def">    </a>
                <a href="http://www.ths123.com/payment/?sid=202" target="_blank" class="def">  </a>
            </div>
        </div>
    </div>
	<div class="login" id="login">
    	<div class="login-in">
        	<div class="login-ini">
            	<a href="http://www.ths123.com/payment/?sid=202" target="_blank" class="a1">    </a>
                <a href="###" target="_blank" class="a2">    </a>
                <p class="timep">  :108M      :2014..4.5</p>
                <div class="login-b">
                	<p>    :0571-56768855</p>
            	</div>
            </div>
            
        </div>
    </div>
    <div class="bn-alp">
    <ul class="box">
      <li class="on">
        <img src="images/img1.jpg" class="bg" />
      <li>
        <img src="images/img2.jpg" class="bg" />
      </li>
      <li>
        <img src="images/img3.jpg" class="bg" />
      </li>
      <li>
        <img src="images/img4.jpg" class="bg" />
      </li>
    </ul>
    	
</div><div class="i">
        	<i class="i1 on"></i>
            <i class="i2"></i>
            <i class="i3"></i>
            <i class="i4"></i>
        </div>
</div>
</body>
</html>

 
 
cssファイル
@charset "gb2312";
html,body,p,form,input,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
body{ font:12px/1.5em 'simsun',Tahoma, Geneva, sans-serif;}
h1,button,input,select,textarea{border:0 none;}
ul{ list-style:none; margin:0; padding:0;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix:before,.clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
.clearfix {zoom:1;clear:both;}
/**/
.wrap-bg{background:-webkit-gradient(linear,0 0,0 100%,from(#fff5ed),to(#fff));background:-moz-linear-gradient(top,#fff5ed,#fff); font-family:Microsoft YaHei;}

.iscroll{ min-width:1200px; height:888px; position:relative; overflow:hidden; z-index:99;}
.intro{ height:90px; min-width:1200px; width:100%; background:url(../images/hd-bg.jpg) no-repeat center center;}
.hd{ height:90px; min-width:1200px; width:100%; position:absolute; top:0; left:0; z-index:99; overflow:hidden; background:url(../images/bg.png) repeat;}

.hd-in{ width:1000px; margin:0 auto; height:90px; position:relative; z-index:999;}
.login{ min-width:1200px; width:100%; position:absolute; top:90px; left:0; z-index:99;}
.login-in{ width:1000px; margin:0 auto; height:500px; position:relative;  z-index:999;}
.login-ini{ width:308px; height:500px; position:absolute; right:0; top:0;background:url(../images/login-bg.png) repeat;z-index:999;}
.login-ini a{ position:absolute; left:34px; text-decoration:none; top:270px; border:1px solid #fff;  width:238px; height:50px; line-height:50px; text-align:center; color:#fff; font-size:22px;}
.login-ini .a2{ top:338px }
.login-ini .timep{ position:absolute; left:34px; top:399px; color:#fff; width:238px; height:22px; line-height:22px; text-align:center;}
.login-ini .login-b{ position:absolute; left:0; bottom:0; height:32px; line-height:32px; border-top:1px solid #7a6c68; width:308px;}
.login-b p{ color:#fff; font-weight:700; text-align:center}
.bn-alp .box li img.bg { display:none; }

.logo-1{ position:absolute; top:20px; left:2px;font-size:42px; color:#ffd200; height:54px; line-height:46px; border-right:1px solid #fff; padding-right:8px}
.logo-2, .logo-3{ position:absolute; top:20px; left:142px; font-size:24px; color:#ffd200; }
.logo-2 em{font-style:normal; color:#Fff}
.logo-3{  top:46px; color:#fff}
.hd-r{ position:absolute; top:40px; right:0; font-size:16px;}
.hd-r a{ color:#fff; text-decoration:none; display:inline-block; margin:0 10px;}
.hd-r a:hover, .hd-r .on{ color:#ffd200}


.bn-alp { width:100%; height:635px; position:relative; z-index:9;}
.bn-alp ul,.bn-alp li { margin:0; padding:0; list-style:none; }
.bn-alp .box { height:100%; position:relative; }
.bn-alp .box li { width:100%; height:635px; background-position:50% 50%; background-color: #666; background-size:cover; position:absolute; top:0; left:0; z-index:10; }
.bn-alp .box li.on { z-index:99; }
.bn-alp .box li img.bg { display:none; }
.bn-alp .box li a.b { display:block; width:100%; height:100%; }

.i {width:878px; height:242px; position:relative; display:block; margin:10px auto 0; z-index:100;}
.i i {width:210px; height:242px; margin-left:8px; cursor:pointer; float:left; z-index:99; position:relative; z-index:999;}
.i .i1{width:210px; height:242px; background:url(../images/small1-def.jpg) no-repeat;}
.i .i2{width:210px; height:242px; background:url(../images/small2-def.jpg) no-repeat;}
.i .i3{width:210px; height:242px; background:url(../images/small3-def.jpg) no-repeat;}
.i .i4{width:210px; height:242px; background:url(../images/small4-def.jpg) no-repeat;}
.i .i1.on { background:url(../images/small1.jpg) no-repeat; z-index:1000;width:210px; height:242px; margin-left:8px; }
.i .i2.on { background:url(../images/small2.jpg) no-repeat; z-index:1000;width:210px; height:242px; margin-left:8px; }
.i .i3.on { background:url(../images/small3.jpg) no-repeat; z-index:1000;width:210px; height:242px; margin-left:8px; }

.i .i4.on { background:url(../images/small4.jpg) no-repeat; z-index:1000;width:210px; height:242px; margin-left:8px; }

 
中に必要な画像は添付ファイルにアップロードしてimagesフォルダにダウンロードすれば実行できます.
 
2つのpngピクチャがpng 24ビットで保存されています.半透明効果であり、ie 6以外で実行する必要があります.