部分代码的用途我还不是很清楚
View Code
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <!-- 5 <link href="CSS/login.css" type=text/css rel=stylesheet></link> 6 --> 7 8 9 <title>欢迎您</title> 10 <style type="text/css"> 11 <!-- 12 body { 13 background-color:#CC0000; 14 background-image: url(Img/tou2.jpg); 15 16 } 17 .STYLE2 {font-size: large} 18 .STYLE16 {color: #dddddd} 19 .STYLE17 {color: #0000CC} 20 .STYLE18 {color: #330000} 21 .STYLE19 {color: #FF9933} 22 .STYLE20 {font-family: Arial, Helvetica, sans-serif} 23 .STYLE21 {color: #FFFFFF} 24 .STYLE22 {color: #FF0000} 25 --> 26 </style> 27 <style type="text/css"> 28 *{margin:0;padding:0;} 29 body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#990100;} 30 .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} 31 .clearfix{zoom:1;} 32 ul,li{list-style:none;} 33 img{border:0;} 34 .wrapper{width:800px;margin:0 auto;padding-bottom:50px;} 35 h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} 36 /* focus */ 37 #focus{width:800px;height:280px;overflow:hidden;position:relative;} 38 #focus ul{height:380px;position:absolute;} 39 #focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#990100;} 40 #focus ul li div{position:absolute;overflow:hidden;} 41 #focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;} 42 #focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;} 43 #focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;} 44 #focus .btn span.on{background:#fff;} 45 #focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;} 46 #focus .pre{left:0;} 47 #focus .next{right:0;background-position:right top;} 48 </style> 49 <script type="text/javascript" src="JS/jquery-1.8.3.js"></script> 50 <script type="text/javascript"> 51 $(function() { 52 var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积） 53 var len = $("#focus ul li").length; //获取焦点图个数 54 var index = 0; 55 var picTimer; 56 57 //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮 58 var btn = "<div class='btnBg'></div><div class='btn'>"; 59 for(var i=0; i < len; i++) { 60 btn += "<span></span>"; 61 } 62 btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>"; 63 $("#focus").append(btn); 64 $("#focus .btnBg").css("opacity",0.5); 65 66 //为小按钮添加鼠标滑入事件，以显示相应的内容 67 $("#focus .btn span").css("opacity",0.4).mouseover(function() { 68 index = $("#focus .btn span").index(this); 69 showPics(index); 70 }).eq(0).trigger("mouseover"); 71 72 //上一页、下一页按钮透明度处理 73 $("#focus .preNext").css("opacity",0.2).hover(function() { 74 $(this).stop(true,false).animate({"opacity":"0.5"},300); 75 },function() { 76 $(this).stop(true,false).animate({"opacity":"0.2"},300); 77 }); 78 79 //上一页按钮 80 $("#focus .pre").click(function() { 81 index -= 1; 82 if(index == -1) {index = len - 1;} 83 showPics(index); 84 }); 85 86 //下一页按钮 87 $("#focus .next").click(function() { 88 index += 1; 89 if(index == len) {index = 0;} 90 showPics(index); 91 }); 92 93 //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度 94 $("#focus ul").css("width",sWidth * (len)); 95 96 //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 97 $("#focus").hover(function() { 98 clearInterval(picTimer); 99 },function() { 100 picTimer = setInterval(function() { 101 showPics(index); 102 index++; 103 if(index == len) {index = 0;} 104 },4000); //此4000代表自动播放的间隔，单位：毫秒 105 }).trigger("mouseleave"); 106 107 //显示图片函数，根据接收的index值显示相应的内容 108 function showPics(index) { //普通切换 109 var nowLeft = -index*sWidth; //根据index值计算ul元素的left值 110 $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position 111 //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果 112 $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果 113 } 114 }); 115 116 </script> 117 </head> 118 119 <body onload="zidong.click()" background="Img/bg1.jpg"> 120 <div align="center"><span class="STYLE22"> 121 </span><br/> 122 <img src="Img/bg1.jpg" /> 123 <br/><br/> 124 <table width="60%" border="0" align="center"> 125 <tr> 126 <td width="15%"><div align="center" class="STYLE16"><a href="login.html" class="STYLE21"><span class="STYLE2">aa</span></a></div></td> 127 <td width="15%"><div align="center" class="STYLE16"><a href="buy_introductions.html" class="STYLE21"><span class="STYLE2">bb</span></a></div></td> 128 <td width="15%"><div align="center" class="STYLE18"><a href="lottery_rules.html" class="STYLE21"><span class="STYLE2">cc</span></a></div></td> 129 <td width="15%"><div align="center" class="STYLE17"><a href="login.jsp" class="STYLE21" ><span class="STYLE2">dd</span></a></div></td> 130 <td width="15%"><div align="center" class="STYLE17"><a href="regist.jsp" class="STYLE21"><span class="STYLE2">ee</span></a></div></td> 131 <td width="15%"><div align="center" class="STYLE19"><a href="superuser.jsp" class="STYLE21"><span class="STYLE2">ff</span></a></div></td> 132 </table> 133 <br/> 134 <div class="wrapper"> 135 <div id="focus"> 136 <ul> 137 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_1.jpg" alt="QQ商城焦点图效果下载" /></a></li> 138 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_2.jpg" alt="QQ商城焦点图效果教程" /></a></li> 139 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_3.jpg" alt="jquery商城焦点图效果" /></a></li> 140 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_4.jpg" alt="jquery商城焦点图代码" /></a></li> 141 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_5.jpg" alt="jquery商城焦点图源码" /></a></li> 142 </ul> 143 </div> 144 </div> 145 <br/> 146 <div align="center"><strong>XXX@版权所有@2013</strong></div> 147 </body> 148 </html>